CSS gradient generator

← All tools

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.
Read more
Free books, courses, and software
Get my programming books, course editions, and complete software.
Get the download library →