Build CSS gradients visually
CSS gradients paint smooth color transitions without image files. Linear gradients run along an angle, radial gradients spread out from the center and conic gradients sweep around a point. This generator lets you place up to five color stops, preview the result and copy CSS with a solid-color fallback.
How to use it
- Choose linear, radial or conic, then set the angle or the shape.
- Edit the color stops: change each color and its position, add colors or remove them.
- Copy the CSS. With Pro you can also export a Tailwind class or an SCSS variable.
Frequently asked questions
Why does the CSS include a solid background first?
The first line is a fallback color for old browsers and tools that don’t understand gradients. Modern browsers use the gradient on the next line.
How do I avoid muddy colors in the middle?
A gradient between opposite hues can turn grey halfway through. Add a bright, saturated color stop in the middle, or pick hues that sit closer together on the color wheel.