CSS Gradient Generator
Web & Design
100% in-browser
Build a linear or radial CSS gradient and copy the code.
How to use the CSS Gradient Generator
- 1 Pick two colors and the gradient type and angle.
- 2 Preview it live.
- 3 Copy the CSS background property.
About the CSS Gradient Generator
CSS gradients create smooth color transitions without images. This generator lets you choose colors, direction and type and gives you the exact background CSS to paste into your styles.
The preview updates live in your browser.
Frequently asked questions
Linear or radial?
Both are supported — linear blends along an angle, radial blends outward from the centre.
Can I add more colors?
This tool uses two color stops; extend the generated CSS with more stops if needed.
Related tools
More from us
