CSS Gradient Generator — Linear, Radial & Conic
Compose a CSS gradient — linear, radial or conic — with colour stops, see it live, and copy the exact declaration to paste.
—
What this tool does
It writes a CSS gradient for you and lets you see it before you commit to it. You choose the
gradient type and angle, add colour stops and drag their positions, and the tool produces the exact
background value to paste. No image export, no guessing at the syntax — just the
declaration that renders what is in the preview.
The three gradient types
| Type | Blend direction | Typical use |
|---|---|---|
| Linear | Along a straight line at the chosen angle | Buttons, hero backgrounds, bars. |
| Radial | Outward from the centre | Spotlights, glows, vignettes. |
| Conic | Around the centre, like a wheel | Colour wheels, pie charts, progress rings. |
Stops, angles and hard edges
The angle runs clockwise from the top — 0° is upward and 90° is to the right — which is the opposite of the intuition many people have, so it is worth checking a couple of values. A stop's position is where that colour sits between 0% and 100%. Two stops of the same colour at the same position give a hard edge instead of a blend, which is how you build stripes without images.
Why gradients instead of images
A gradient is a few dozen bytes of CSS rather than a PNG, so it costs almost nothing to serve, scales to any size without blurring, and can be changed without re-exporting a file. For anything a gradient can express — a smooth background, a subtle sheen, a colour ramp — it is smaller, sharper and easier to maintain than an image.
Frequently asked questions
What is a CSS gradient?
A gradient is a CSS background that blends between colours instead of showing a single flat one. linear-gradient() blends along a straight line at an angle, radial-gradient() blends outward from a centre point, and conic-gradient() blends around a centre like a colour wheel. All three are supported everywhere and need no image file.
What does the angle mean in a linear gradient?
The angle is the direction the gradient runs, measured clockwise from "to top": 0deg runs upward, 90deg runs to the right, 180deg runs downward and 270deg to the left. The first colour stop sits at the start of that line, the last at the end.
What are colour stops?
Each stop is a colour with a position along the gradient, from 0% to 100%. Two stops blend smoothly between them; three or more let you place a colour precisely in the middle. Dragging a stop changes where that colour appears.
How do I use the generated CSS?
Copy the declaration and paste it as a background property — either into a stylesheet rule or inline in a style attribute. The tool shows both the bare gradient value and a full rule with a selector, so you can take whichever fits.
Is my gradient uploaded?
No. The gradient is composed as text in your browser and nothing is sent anywhere; the page works offline once loaded.
Can I make a striped or hard-edged gradient?
Yes — give two stops the same position, for example #f00 50%, #00f 50%. With no gap between them the blend has no room to happen, so the gradient becomes a hard edge. Repeat the pattern for stripes.
Go deeper
Longer explanations of the problems this tool solves:
Sources
- CSS Images Module Level 3 — linear-gradient, radial-gradient and conic-gradient (W3C).
Everything runs in your browser — nothing you type is uploaded.