Back to Tools
CSS Gradient Generator
Visually create linear and radial CSS gradients with copy-ready code.
135°
0%
100%
Popular Presets
About the CSS Gradient Generator
CSS gradients let you create smooth colour transitions for backgrounds and buttons without any image files, which keeps pages fast. This generator lets you design linear, radial, and conic gradients visually with as many colour stops as you like.
Adjust the angle and colours, preview the result live, and copy the ready-to-use CSS.
How to use the CSS Gradient Generator
-
1
Choose a gradient type
Pick linear, radial, or conic.
-
2
Add colour stops
Add colours and drag stops to control the blend.
-
3
Set the direction
Adjust the angle or position of the gradient.
-
4
Copy the CSS
Copy the generated background rule into your stylesheet.
Frequently asked questions
Are CSS gradients better than images?
Yes, for solid colour transitions. Gradients render instantly, scale to any size without blurring, and add zero extra file downloads.
What is a conic gradient?
A conic gradient transitions colours around a centre point (like a colour wheel or pie chart), rather than along a line or outward from a centre.
Do gradients work in all browsers?
Linear and radial gradients work everywhere. Conic gradients are supported in all current browsers.