CSS Gradient Generator
Build linear and radial CSS gradients visually and copy the ready-made code.
Generate Linear, Radial and Conic CSS Gradients
CSS gradients are painted by the browser rather than downloaded, so they cost nothing in bandwidth, scale to any size without blurring, and adapt to a dark or light theme through custom properties. They have almost entirely replaced background images for this kind of decoration.
The syntax is fiddly to write by hand, especially once colour stops and angles are involved. This generator gives you a live preview while you adjust, then hands you the exact declaration to paste.
Key features
- Three gradient types — linear, radial and conic, all with live preview.
- Two or three colour stops — with individual position control for each.
- Angle and shape control — a 0–360° dial for linear and conic, circle or ellipse for radial.
- Randomise — generates harmonious combinations by rotating the hue wheel rather than picking at random.
- Copy-ready output — the full
background:declaration, not a fragment.
This tool runs entirely inside your browser using native Web APIs. Your files and text are never uploaded to a server, never logged and never shared with third parties.
How to use: CSS Gradient Generator
- Choose a gradient type
Linear fades along a line, radial outwards from a point, and conic sweeps around one like a pie chart. - Set your colours and positions
Each stop has a colour and a percentage position along the gradient. - Adjust the angle
For linear gradients, 0° runs bottom to top and 90° left to right. 135° is the common diagonal. - Copy the CSS
Paste the declaration straight into your stylesheet.
Technical specifications
| Processing location | Entirely in your browser — no server round trip |
|---|---|
| Data uploaded | None. Files and text never leave your device |
| Price | Free — no account, no trial, no usage cap |
| Category | Design |
| Works offline | Yes, once the page has loaded |
| Browser support | Chrome 90+, Edge 90+, Firefox 90+, Safari 15+ |
| Interface languages | English, 中文, हिन्दी, Español, العربية |
Frequently asked questions
How do CSS gradient angles work?
The angle points in the direction the gradient travels toward. 0deg goes bottom to top, 90deg left to right, 180deg top to bottom. This differs from how angles work in most drawing tools, which is a common source of confusion.
Why does my gradient look banded?
Banding appears when two similar colours are spread over a large area with only 8 bits per channel to work with. Adding an intermediate colour stop, increasing the contrast between stops, or overlaying a subtle noise texture all help.
Are CSS gradients good for performance?
Yes — they are drawn by the compositor with no network request and no decode step, and they stay sharp at any resolution. A gradient is essentially always cheaper than an equivalent image file.
Do conic gradients work everywhere?
They are supported in all current browsers (Chrome 69+, Firefox 83+, Safari 12.1+). If you must support much older versions, provide a linear gradient or solid colour as a fallback declared first.