CSS Gradient Generator
Build CSS linear and radial gradients with a live preview, unlimited color stops, and one-click copy. Fast, private, and fully client-side.
Runs in your browser — nothing uploaded
Color stops
#0f766e0%
#22d3ee100%
CSS
background: linear-gradient(90deg, #0f766e 0%, #22d3ee 100%);
Create CSS gradients visually and copy the code in one click. Pick linear or radial, set the angle, and add as many color stops as you like — the preview updates live so you can dial in exactly the blend you want before pasting the CSS into your stylesheet.
Private by design — your data never leaves your device
How to use it
No account, no upload — it all happens on your device.
1
Choose a linear or radial gradient, and set the angle for linear.
2
Pick a color and position for each stop; add or remove stops as needed.
3
Watch the live preview update as you adjust.
4
Click Copy to grab the ready-to-use CSS.
Gradient syntax at a glance
What the generated CSS means.
| Part | Example | Meaning |
|---|---|---|
| Angle | 90deg | Direction of a linear gradient (0 = up). |
| Color stop | #0f766e 0% | A color pinned to a position. |
| Shape | circle | Radial gradients spread as a circle or ellipse. |
Tips for great gradients
- Keep hues close. Blending colors near each other on the color wheel looks smoother than mixing opposites, which can create a muddy band in the middle.
- Mind the angle. In CSS,
0degpoints up and angles increase clockwise, so90degruns left to right. - Layer for depth. Stack a subtle radial gradient over a linear one (multiple backgrounds) for richer, less flat surfaces.
Frequently asked
What's the difference between linear and radial gradients?
A linear gradient blends colors along a straight line at the angle you choose. A radial gradient blends outward from a center point in a circle or ellipse. Use linear for backgrounds and buttons; use radial for spotlights, glows, and soft vignettes.
How do color stops work?
Each stop is a color pinned to a position from 0% to 100% along the gradient. Add more stops for multi-color blends, and drag the positions to control where each color sits and how sharp or soft the transition is.
Is anything uploaded?
No. The gradient and its CSS are generated entirely in your browser. Nothing you create is sent anywhere.