CSS gradient generator
Pick a gradient type, edit color stops, and copy the CSS. Toggle hard stops or repeating variants when you need stripes.
~~~
Type
Presets
Hover a swatch for its name, click to load.
Color stops
Preview
~~~
Output
Gradient value
Full background rule
Your gradient settings are saved in the URL for sharing.
~~~
About this tool
CSS gradients layer multiple color stops into one background image. Linear gradients follow an angle, radial gradients radiate from a point, and conic gradients sweep around a center.
Enable hard stops when you want sharp stripes instead of smooth blends — duplicate the same color at adjacent positions.
~~~