CSS Gradient Generator — Linear, Radial & Conic
Build a gradient visually, copy the exact CSS that made it.
🔒 Runs in your browser — files never uploaded ⚡ No signup 💯 Free
Build CSS gradients visually: linear with any angle, radial, or conic, with as many colour stops as you want, each draggable to its position. The CSS below the preview is the literal string painting it — copy it and it can't look different in your project.
The random button draws from curated colour pairs rather than raw randomness, so it's a source of usable starting points, not noise.
How to use Gradient Generator
- Pick a type — linear (with angle), radial, or conic.
- Set your colours. Add stops for multi-colour gradients; drag each stop's position slider.
- Copy the CSS. One
backgrounddeclaration, ready to paste.
Linear, radial, conic — when each
Linear is the workhorse: backgrounds, buttons, hero sections. The angle matters more than people expect — 135° (top-left to bottom-right) reads more natural than straight vertical for most layouts. Radial works for spotlights and vignettes. Conic is the specialist: colour wheels, pie-chart effects, and — rotated and blurred — the trendy "aurora" backgrounds.
Why some gradients band and look muddy
Two causes. Banding — visible stripes — appears in slow transitions across large areas; adding an intermediate stop or two breaks it up. Muddiness happens between complementary colours (blue→orange passes through grey in RGB interpolation); route via an intermediate hue, or keep gradient pairs within a third of the colour wheel — which is what the random button's curated pairs do.
Text on gradients
Contrast varies across a gradient, so text that's readable at one end can fail at the other. Check both extremes against your text colour with the contrast checker — the fix is usually a translucent overlay behind the text, not a different gradient.
Frequently asked questions
Why does my gradient show visible stripes?
Banding — 8-bit colour can't always produce enough in-between shades for a slow transition across a large area. Add an intermediate colour stop or two, shorten the transition, or use colours that differ more in hue than in brightness.
Why does blue-to-orange look grey in the middle?
CSS interpolates in RGB by default, and the straight line between complementary colours passes through grey. Add a stop that routes around it (blue → purple → orange), or pick colours closer on the wheel — the curated random pairs here avoid the problem by construction.
Which browsers support these gradients?
Linear and radial: everything from the last decade, unprefixed. Conic: all modern browsers (since ~2020). The generated CSS is the standard syntax with no prefixes needed.
Can I use a gradient on text?
Yes, with the background-clip trick: set the gradient as the text's background, then background-clip: text and color: transparent. Generate the gradient here and wrap it in those three lines.