About this tool
This tool lets you build a two-color linear or radial gradient with a live preview, adjusting colors and angle until it looks right, then copy the exact CSS background property to paste into your stylesheet.
How to use it
- 1Choose linear or radial gradient type.
- 2Pick your two colors.
- 3For linear gradients, adjust the angle slider.
- 4Copy the generated CSS.
Common mistakes to avoid
- Forgetting that radial gradients in this tool don't use an angle — direction isn't meaningful for a radial gradient's default circular shape.
Use cases
- Designing a background gradient for a hero section or button.
- Prototyping a gradient before implementing it in a design tool.
Frequently asked questions
Can I add more than two colors?
Not in this tool — it generates a simple two-color gradient. For multi-stop gradients, extend the copied CSS manually by adding more color stops.