CSS Gradient Generator
Design a linear, radial or conic gradient with as many color stops as you like, then copy the CSS.
Presets
Color stops
CSS
How to create a CSS gradient
Choose linear, radial or conic, set the angle or center, and adjust the color stops. Drag a stop’s slider to move it, add stops for multi-color blends, or start from a preset. Copy the CSS and paste it into any element’s style.
Tip: “Smoother colors” blends in the OKLCH color space, which avoids the muddy middle you get when mixing complementary colors like blue and yellow.
Frequently asked questions
Do CSS gradients work in all browsers?
Yes. Linear, radial and conic gradients work in every modern browser without prefixes.
How do I make smooth gradients without grey bands?
Mixing two very different hues in sRGB can pass through grey. Add a middle stop, or use the “Smoother colors (OKLCH)” option, which interpolates in a perceptual color space.
Can I use a gradient for text?
Yes: set the gradient as background, then add background-clip: text and color: transparent to the text element.