Web design · Browser tool
CSS gradient generator
Set the type, angle and color stops. The preview and the CSS change as you go, and nothing leaves your browser.
FreeNo account, no job limit, nothing uploaded
- Linear, radial and conic gradients with 2 to 12 color stops
- Copy the full CSS rule, with a solid background color as fallback, or only the gradient value
- The same gradient as inline SVG, to copy or download as an .svg file
- Seven presets to start from, from a soft two-color fade to a hard-edged pie
The same gradient as SVG
Some places cannot use a CSS background, for example email templates or design files. Set the box size and copy the SVG, or download it. Linear and radial gradients translate exactly. Conic gradients have no SVG equivalent, so the file approximates one with 72 wedges of five degrees each.
How CSS gradients work
Three functions, three directions
A CSS gradient is painted by the browser from a rule, so it scales to any element size and needs no image file. linear-gradient runs along a straight axis, radial-gradient spreads out from a point, and conic-gradient sweeps around one. Radial gradients here take a circle or ellipse shape, a centre position and one of the four size keywords. Conic gradients take a start angle and a centre.
The angle is measured from the top
On a linear gradient, 0° points up and the angle grows clockwise, so 90° points right and 180° points down. The default here is 135°, from the top left to the bottom right.
Stop spacing
Where you place the stops decides how the blend looks. Stops spread far apart give a slow change. Two stops at the same position give a hard edge, which is how the Pie preset draws its segments. Stops can be typed in any order; the output always lists them from 0% to 100%, and Sort by position tidies the editor to match.
Why the middle can turn grey
Browsers mix gradient stops in sRGB by default, and so does this preview. Two colors far apart in hue, such as blue and yellow, can pass through a dull grey halfway. Add a third stop in the middle with the color you want there.
Questions before you start
What gradient types can I create?
Linear gradients with an angle from 0 to 360 degrees, radial gradients as a circle or ellipse with a centre position and size keyword, and conic gradients with a start angle and centre. Each gradient takes 2 to 12 color stops.
What does the copied CSS contain?
A .gradient rule with two lines: background-color set to the first stop as a fallback, and background-image with the gradient. Copy value only gives you just the gradient function, for example to paste into an existing rule.
Can I get the gradient as an SVG file?
Yes. Enter a width and height between 1 and 4000 pixels, then copy the SVG markup or download it as an .svg file. Linear and radial gradients match the CSS exactly. Conic gradients are approximated with 72 wedges of five degrees each, which can show faint banding on slow color changes.
Why does my gradient look grey in the middle?
Colors are mixed in sRGB, as browsers do by default. Two colors far apart in hue can pass through grey. Add a stop at the midpoint with the color you want there.
Is anything uploaded?
No. The preview is a CSS background on this page and the SVG is built as text in your browser. There is no account and no job limit.