CSS tools
- Generate CSS gradients
CSS Gradient
Visual gradient editor that hands you the CSS - linear or radial, any number of stops
CSS Gradient - Style without a build step
- Customize websites
- Generate CSS only buttons
- Get loader css code
- Generate CSS only accordion sliders
CSS Gradient
Visual gradient editor that hands you the CSS - linear or radial, any number of stops
A visual editor for CSS gradients. Pick your colors, drag the stops along a preview bar, switch between linear and radial, set the angle, and copy the finished background rule. The site also keeps a gallery of ready-made gradient swatches, curated color shades and real-world examples if you'd rather start from something that already looks good.
What we love ❤️
- The whole editor fits on one screen - preview, stops, color picker and the CSS output, no tabs to dig through
- Drag stops directly on the gradient bar and see the result update live
- Linear and radial with an angle dial, plus an optional legacy fallback line for old browsers
- Type a HEX or RGBA value, or use the picker - whichever is faster for you
- Swatches and examples pages are a good source of usable palettes when you're stuck
- Free, no account
Worth noting 💡
- It's ad-supported and loads a heavy ad stack - expect banners, a video player and a lot of third-party cookies. Nothing you enter is sensitive, so it's a nuisance rather than a risk
- Linear and radial only - no conic gradients
- Outputs plain CSS - if you want Tailwind classes or SVG you'll have to translate it yourself
Writing a two-stop gradient by hand is easy; getting a four-stop one to look right without a preview is not. CSS Gradient is the quickest way to fiddle with stops and angles until it looks right, then copy the rule and move on.