Building a gradient and taking the CSS away
1. Start from a preset or your own colour
The ready-made gradients along the bottom are a starting point, not a limit. Or click a handle and paste your own brand colour straight into the colour box.
2. Drag the handles to place the colours
Each handle on the bar is one colour stop. Drag it to move where that colour sits. Click anywhere else on the bar to add a stop exactly there.
3. Type the colour rather than hunting for it
The colour box takes a hex code, an rgb(), an hsl() or a plain name like rebeccapurple. Paste and it applies; type something that is not a colour and the box says so.
4. Fade it out if you need to
The opacity slider takes any stop down to fully transparent. The chequered squares behind the preview show exactly where the background will come through.
5. Choose the shape and the direction
Linear with any angle, radial as a circle or an ellipse anchored anywhere, or conic sweeping around a point. The direction buttons cover the eight everyday angles.
6. Copy the CSS
One line, ready to paste. Or ask for a version with a solid colour fallback in front of it, for the rare browser that will not draw the gradient.
Where a new colour stop should actually go
This sounds like a detail and was the tool’s worst bug.
Until 29 August 2026, “+ Add stop” put every new stop at 100%. Press it twice on the default gradient and you got this:
linear-gradient(90deg, #667eea 0%, #764ba2 100%, #bb1e9c 100%, #2a35ca 100%)Three stops on the same position. CSS draws that as a hard edge with two of the colours doing nothing at all, so the tool appeared to ignore the button. The only way to recover was to drag the sliders apart and work out where the stops had gone.
That last part matters more than the placement. A new stop now samples the colour already showing at that position and adopts it, so adding a handle changes nothing visually. You then move it, or change its colour, and see exactly what that one change did.
Typing a colour instead of hunting for it in a dialogue
The previous version offered one way to choose a colour: the native <input type="color"> swatch, which opens your operating system’s colour picker. Measured on the live page — four of those, and zero text inputs. There was no way to paste #0066cc, which is the single most common thing anybody wants to do with a brand colour.
There is a text box now, and it accepts anything CSS accepts: hex in three, six or eight digits, rgb(), rgba(), hsl(), and the named colours down to rebeccapurple. Parsing is handed to the browser itself rather than to a pattern in this page, so whatever your stylesheet accepts, this box accepts. Type something that is not a colour and the box turns red and the gradient is left alone.
Transparency, and the fade that could not be made
Every stop in the old build was an opaque hex, which quietly ruled out the most common gradient on the web: an overlay that fades from a solid colour to nothing, so a photograph shows through underneath and the text on top stays readable.
Stops carry opacity now, and the output switches from hex to rgba() automatically for any stop that needs it. The preview sits on a chequerboard, which matters more than it sounds — on a white page, a fade to transparent and a fade to white look identical, and you only discover which one you built after you put it over a photograph.
Linear, radial and conic — what each one is for
Linear sweeps in a straight line at whatever angle you set. This is the workhorse: hero sections, buttons, cards, text overlays. 0° runs upwards and the angle turns clockwise, so 90° runs left to right.
Radial spreads outward from a point, as a circle or a stretched ellipse. Use it for spotlights, glows behind a product shot, and soft vignettes. Two controls decide how it behaves: the shape, and how far it reaches before the last colour is reached — to the nearest edge, or all the way to the farthest corner. The old version could only draw a circle, centred, reaching the farthest corner.
Conic sweeps around a point like a clock hand. It is what you want for pie charts drawn in pure CSS, colour wheels and loading spinners. Support is universal in current browsers, though it arrived later than the other two — check the support table if you still carry very old browsers.
Reading the CSS it writes
The output is a single declaration you can paste straight into a stylesheet. Three shapes are offered because they suit different places:
background:— the normal one, for a rule where the gradient is the whole background.- With a solid fallback — the first stop’s colour on one line, the gradient on the next. Any browser that cannot draw the gradient keeps the solid colour and stays readable. Worth using for text overlays.
background-image:— when you are also settingbackground-colorseparately, or layering the gradient over an image.
Stops are always written with explicit percentages, even the ones at 0% and 100% that CSS would infer. That is deliberate: it makes the declaration easy to edit by hand afterwards and impossible to misread.
Bringing an existing gradient back in
Paste a gradient into the import box and it loads into the editor. That covers the case a generator normally cannot help with: you already have a gradient in your stylesheet and want to nudge one colour.
It reads the angle whether written as 135deg or as to bottom right, keeps rgba() transparency, understands radial shapes, sizes and positions, and spreads stops evenly when the original did not state positions — which is what CSS itself does. If any part cannot be read, it tells you which part and changes nothing, rather than importing half a gradient and leaving you to spot the difference.
When the copy button cannot copy
Browsers do not always let a page write to the clipboard — an insecure connection, a locked-down browser or a strict privacy setting will all refuse it. The old build called the clipboard and attached no error handler, so on those setups the button did nothing at all and said nothing about it.
There is a second method behind it now, and if both are refused the page says so and points out that the CSS above is selectable text you can copy by hand.
Questions people ask about CSS gradients
Why did adding a stop seem to do nothing before?
Because every new stop was placed at 100%, on top of the last one. The colour was in the CSS but had no space to be drawn in. Stops now land in the middle of the widest gap.
How do I fade an image out at the bottom?
Make a linear gradient at 180°, set the first stop fully transparent and the last stop to your background colour, and lay it over the image. Build it here and watch the chequerboard to be sure the transparent end really is transparent.
Can I use more than two colours?
As many as you like. Three or four is usually the practical limit before a gradient starts to look muddy, but nothing stops you.
What angle is “to the right”?
90°. CSS angles start at 0° pointing up and turn clockwise, so 180° runs downwards. The direction buttons cover the eight common ones if you would rather not think in degrees.
Will these gradients work in every browser?
Linear and radial gradients work everywhere in current use, with no vendor prefixes needed for many years now. Conic gradients are newer but supported across current browsers. If you support genuinely ancient browsers, use the output mode with a solid colour fallback.
Why does my exported colour look slightly different from my design tool?
Because a colour typed as hsl() or a named colour is converted to its RGB equivalent, which is exactly what the browser does when it renders. The value is the same colour, written differently.
Can I save a gradient to come back to?
Copy the CSS and keep it. Pasting it back into the import box restores it in the editor, so the CSS itself is the save file.
Is anything sent anywhere?
No. This is arithmetic and a preview in your browser. There is no server to send anything to.
Other tools that pair with this one
- Image Colour Picker — to pull the exact colours out of a photograph before building the gradient.
- HEX to RGB Converter — when you need the same colour in another notation.
- Colour Code Converter — for moving between hex, RGB and HSL.
- Box Shadow Generator — the same idea applied to shadows.