58%drag · type · both
Move one stop, three ways
Drag its handle on the rail, scrub the position field sideways, or click and type an exact value. All three stay in sync, so exploring never costs you precision.
Why it exists
Getting a gradient right takes a lot of small passes. Most tools turn each one into a chore.
When you do not yet know what you want, writing the CSS by hand is slow: change a number, reload, compare against what you remember seeing a minute ago. The tools meant to help mostly rebuild that friction in a browser tab — a slider you cannot type into, a field you cannot drag, one landscape preview floating on a colour you will never ship.
This editor assumes the opposite: you are going to iterate a lot, and you will want to back out of half of it. So every value can be dragged or typed, every variant can be duplicated before you experiment on it, and every preview sits on a background and a frame ratio you choose.
What it does differently
Built around the gesture
Spread every stop at once
One bar spreads or tightens the whole group around its center while keeping the exact distance ratios between stops. Drag its middle and the group slides along the axis instead. Esc cancels mid-gesture.
Compare variants side by side
Duplicate before trying a risky direction. The original sits untouched next to it, so you judge two versions against each other instead of against your memory.
Preview on a real background
A gradient is almost always an effect laid over something else. Pick a solid colour, a transparency checkerboard, or drop in a screenshot of the actual page.
Six frame ratios
Desktop, laptop, tablet, mobile, square and banner. A halo that reads beautifully in 16:9 can fall apart in 9:19.5 — one landscape frame hides that from you.
background-image:
linear-gradient(128deg,
rgba(255,255,255,0) 20%,
rgba(255,255,255,.5) 52%);Exact CSS out
Preview and export come from the same function, so what you copy is what you saw. As a declaration, a full rule, or a custom property.
Reference
The three CSS gradient types
linear-gradient()
sheens · overlays · light
Colours travel along a straight axis set by an angle. Dragging on the preview slides the gradient along that axis rather than moving a centre point.
radial-gradient()
halos · glows · vignettes
Colours radiate from a point, as a circle or an ellipse. The centre can sit outside the frame — that is how a corner glow is built.
conic-gradient()
wheels · sweeps · iridescence
Colours sweep around a centre like a clock hand. The starting angle decides where the sweep begins.
Questions
Good to know
Do I need an account?
No. Everything runs in your browser and your work stays in local storage on your own machine. There is nothing to sign up for.
Why do my gradients show visible bands?
Banding comes from 8-bit colour quantisation, and it shows up most on subtle, low-contrast fades stretched across a large area — exactly the kind of overlay this tool is built for. A faint noise layer over the gradient is the usual fix.
Why not fade to `transparent`?
In CSS, `transparent` means `rgba(0, 0, 0, 0)`. Fading to it drags the gradient through black and leaves a grey haze in the middle. Keeping the stop's own hue at zero opacity avoids it — and that is what this editor exports.
Can a stop sit outside 0–100%?
Yes, and CSS accepts it for all three types. It is what lets the spread control push stops past the frame without breaking the distance ratios between them. The rail pins such a stop to its edge with an outward point, while the real value stays editable in the list.
Nothing to install.
The editor is right at the top of this page, already running. Your work stays on your machine.
Back to the editor