CSS gradient generator
Blend two or more colors into a smooth linear or radial gradient and copy the CSS in one click. Adjust angle, stop positions, and shape live in your browser.
Preview
Type
Color stops
- 1%
- 2%
CSS output
background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);Presets
Ship gradients that read well at any size
Hero backgrounds, button highlights, card depth, illustration accents: a gradient is the fastest way to add life to a flat surface. Two well-chosen colors already give a richer feel than a solid fill, and a third or fourth stop turns the background into something with real character.
If the result looks muddy, try moving the angle and stop positions before swapping colors. Similar lightness values blend smoothly, while colors with strong lightness contrast feel sharper. When the middle goes grey, add a stop in the gap so the two endpoints meet at the color you actually want.
Everything runs in your browser. Color values never leave the page, and the CSS you copy is ready to paste into any project. linear-gradient and radial-gradient are supported in every modern browser without prefixes.
Related tools
Continue with tools that fit the same task flow.