CSS Gradient Generator
Drag the dots on the axis · drag either end to rotate
The browser default. Fast and predictable, but complementary pairs desaturate halfway.
Where the halfway color lands between this stop and the next. Also draggable as the diamond on the rail.
Near-black text only clears 3:1 at the worst point — large headings are fine, body copy is not. Add a scrim or darken one end.
.gradient {
background-image: linear-gradient(
135deg,
rgb(56 88 233) 0%,
rgb(127 86 217) 50%,
rgb(230 169 200) 100%
);
}Standard sRGB interpolation — bare percentages are color interpolation hints, not stops.
As a header fill behind text — the label uses whichever of black or white holds up best across the whole ramp.
About this generator
CSS Gradient Generator Online
The most advanced CSS gradient generator on the internet, and the only one that works in both directions: build linear, radial and conic gradients by dragging stops directly on the artwork, or paste any existing CSS gradient and get it back as a fully editable set of handles. Every stop carries its own alpha, the midpoint between any two stops is adjustable, and the result comes out as CSS, SVG, a Tailwind class or JSON — or downloads as a PNG or SVG at any size.
What you see on the canvas is the CSS being generated, not an approximation of it — the preview, the exported image and the copied code all come from the same stop list. Free, no account, and nothing leaves your browser.
Reviewed Output tested on CSS Images 3 · CSS Color 4 · Chrome, Safari, Firefox
Why this is the most advanced gradient generator available
Most gradient sites give you two colour inputs, an angle slider and a copy button. That is fine until you need a third stop in a specific place, a transparent end for an image overlay, a ramp that does not go grey in the middle — or, most often of all, until you need to edit a gradient that already exists somewhere in your codebase. Those are the ordinary cases this tool is built around.
It works both ways — CSS to gradient, and back
Paste any linear-gradient(), radial-gradient() or conic-gradient() — a whole declaration, a bare function, or even this tool’s own Tailwind class — and it becomes editable handles on the canvas. Side keywords, every angle unit, radial size keywords, px stop positions, omitted positions and interpolation hints are all read back correctly. Almost every other generator is write-only.
Editing happens on the artwork
Stops are handles on the gradient axis itself. Drag an axis end to rotate, drag a stop to move it, drag the centre or either radius of a radial, click anywhere on the rail to add a stop already the colour it sits on. The numbers follow your hand rather than the other way round.
Alpha is a first-class value
Every stop has its own opacity, shown against a checkerboard so you can see it, and preserved through the CSS, SVG and PNG exports. Fades are written as the full colour at zero alpha rather than the transparent keyword, which is what stops them travelling through grey.
OKLab interpolation, with a real fallback
Blend in sRGB like every other tool, or in OKLab so complementary colours stop turning muddy halfway. Emit the modern one-line in oklab syntax, or a version sampled into twelve steps per pair that produces the same ramp in browsers that do not support it yet.
Midpoint control per pair
Push the halfway colour toward either end and the tool writes it as a CSS colour interpolation hint — a real part of the spec that almost no generator exposes, and the cleanest way to bias a two-stop ramp without inventing a third stop.
Banding and legibility taken seriously
Wide, low-contrast ramps band visibly on 8-bit displays; the grain option dithers them in the preview, in the PNG and as a CSS snippet you can keep. And because a gradient is usually a background, the tool samples along the ramp and reports the worst-case WCAG contrast for black and for white text.
How does the CSS gradient generator work?
A CSS gradient is a list of colours with positions along a line. Everything else — angle, shape, repetition — is how that line is laid over the box.
- 01
Start from scratch or paste
Pick linear, radial or conic — or drop an existing gradient into the "Load a gradient" box and carry on editing it. Repeating tiles the whole ramp end to end.
- 02
Place the stops
Drag them on the canvas or the rail, click the rail to add one, and set each colour and alpha in the picker. The picker takes any CSS colour notation, and the dropper samples any pixel on your screen.
- 03
Shape the blend
Choose sRGB or OKLab interpolation, nudge the midpoint between any pair, and add grain if the ramp is wide enough to band.
- 04
Copy or download
Take the CSS, SVG, Tailwind value or JSON, or export a PNG or SVG at a preset or custom size, up to 3× scale.
Worked example — a three-stop scrim with a transparent end
The overlay pattern used on almost every hero image: solid at the bottom, gone by the middle. Note the third value in each colour — that is the alpha — and the bare percentage on its own line.
.gradient {
background-image: linear-gradient(
0deg,
rgb(18 16 12 / 0.85) 0%,
38%,
rgb(18 16 12 / 0.35) 55%,
rgb(18 16 12 / 0) 100%
);
}The bare 38% is a colour interpolation hint: it moves the halfway point of the first blend without adding a stop. That is the midpoint control in this tool, written the way the spec intends. Paste this whole block back into the "Load a gradient" box and you get the three handles and the moved midpoint back, exactly as they were.
CSS gradients — frequently asked questions
The problems that come up once a gradient leaves the design file.
Can I paste an existing CSS gradient in and edit it?
Yes — that is the half most generators are missing. Drop a whole background-image: declaration, a bare linear-gradient(...), or a Tailwind arbitrary value into the "Load a gradient" box and every stop becomes a handle you can drag. It reads side keywords like to top right, angles in deg, turn, rad or grad, radial size keywords like farthest-corner, explicit radii, from angles on conic gradients, stop positions given in pixels, positions left out entirely (which CSS distributes evenly), and bare interpolation hints. Colours can be hex, rgb(), hsl(), oklch(), color-mix(), a colour name or transparent.
Why does my gradient turn gray in the middle?
Because it is being blended in sRGB. Halfway between two roughly opposite hues the channel averages cancel out and you get a desaturated middle. Switch interpolation to OKLab and the blend keeps its chroma, taking a path around the hue circle instead of straight through the middle of it. If you need it to work in older browsers, leave "Native in oklab" off and the tool writes the same ramp as sampled sRGB stops instead.
Why does fading to transparent go through gray?
Because transparent is shorthand for transparent *black*, so the colour is travelling toward black as it fades. Fade to the same colour at zero alpha instead — this tool always writes the full colour with an alpha of 0, which is why its fades stay clean. It is also why pasting a gradient that ends in transparent will show you a black end stop at 0% opacity: that is what the original actually meant.
What causes those visible stripes across a large gradient?
Banding. An 8-bit channel has 256 steps, and a wide, low-contrast ramp may need more distinct values than the distance provides, so it quantises into visible bands. The fixes are more contrast, a shorter ramp, or dithering — which is what the grain option does, both in the CSS (as a tiny inline SVG noise overlay) and in the exported PNG.
Should I use a CSS gradient or an exported image?
CSS whenever you can — it costs no bytes, scales to any size and stays sharp on any display. Export an image only when the gradient has to live somewhere CSS cannot reach: an email background, an Open Graph or social card, a slide deck, or an app icon. Note that conic gradients have no SVG equivalent, so those export as PNG only.
How do angles work in CSS gradients?
Zero degrees points to the top and the angle increases clockwise, so 90deg goes to the right and 180deg to the bottom. This trips people up because many other graphics systems measure from the right and go anticlockwise. The gradient line is also sized so the box corners land exactly on 0% and 100%, which is why a 45-degree gradient on a wide box is longer than the box is tall.
Can I put a gradient on text or a border?
Yes to both, and the "Try it on" panel shows each. Text needs background-clip: text with a transparent colour; borders need two backgrounds with different background-clip values, since border-color cannot take a gradient. Keep an eye on contrast for text — thin strokes lose the light end of a ramp first, which is what the legibility readout is warning you about.
How do I add this gradient to a WordPress block theme?
Register it as a preset in theme.json under settings.color.gradients, with a slug, a name and the gradient value you copied here. That puts it in the block editor’s gradient picker for every author on the site and generates a --wp--preset--gradient--{slug} custom property you can use in your own CSS. The theme.json generator in this library will write that block for you.
How do I use this gradient in a real project?
Copy the CSS tab and paste the background-image line into your stylesheet, a block’s Additional CSS, or a theme’s style.css. For a block theme, the cleanest home is a gradients preset in theme.json, which puts it in the editor’s gradient picker for everyone on the site. Use the PNG or SVG export only where CSS cannot reach — an email background, a social card, or a slide.
Is the gradient I build stored or uploaded anywhere?
No. Every calculation, including the PNG encode, runs in your browser — there is no server call at any point, and nothing you paste into the import box leaves the page. Your current gradient is saved in this browser so the tool reopens where you left it; clearing site data removes it.
The other Design generators in the library, plus the WordPress tools most often used alongside this one.