Design a CSS Gradient With Live Preview
Design a CSS gradient by picking colors, angle, and type, preview it live, and copy the CSS code.
#6366f1#ec4899background: linear-gradient(90deg, #6366f1, #ec4899);Assembled locally
Safe for unreleased branding
No account
Secure connection
How it works
- 1
Pick your colours
Set the start and end colours, and add stops in between if the transition needs steering.
- 2
Set direction or shape
Choose an angle for a linear gradient, or a shape and position for a radial one.
- 3
Copy the CSS
Take the generated `background` declaration straight into your stylesheet.
Why use this tool
See it while you build it
A gradient is judged by its middle, not its endpoints — the live preview shows the part that actually goes wrong.
Copy-ready CSS
The output is a valid `background` declaration, correctly formatted, with no cleanup before pasting.
Linear and radial
Both types with control over angle or shape, which covers nearly every gradient a site needs.
Multiple colour stops
Add stops to steer the path between colours instead of accepting whatever the midpoint gives you.
Nothing is uploaded
The declaration is assembled in your browser — no colour values are sent anywhere.
Free with no account
No sign-up, no limit, and no watermark.
The muddy middle, and why it happens
The most common disappointment with gradients is that two attractive colours produce a dull grey-brown band between them. This is not a design failure but a mathematical one: browsers interpolate gradients in sRGB, blending the red, green and blue channels independently and in a straight line. Blend a saturated blue with a saturated yellow that way and the midpoint has middling amounts of all three channels, which is the definition of grey. The effect is worst between colours far apart on the hue wheel — blue to yellow, red to green — and barely noticeable between neighbours. Recognising it as arithmetic rather than taste is what makes it fixable.
Fixing it with an intermediate stop
The practical remedy is to stop letting the browser choose the path. Add a colour stop in the middle and set it to the hue the transition should pass through — a blue-to-yellow gradient routed through a green or a teal stays vivid the whole way, because you have told the interpolation where to go instead of letting it cut through the neutral centre. Choosing that middle colour is easiest in HSL, where you can pick a hue angle between the two endpoints and keep the saturation high; the colour converter turns that value into the HEX the declaration wants. One well-placed stop fixes most gradients that look washed out.
Linear and radial, and when each is right
A linear gradient runs along a straight axis at an angle you set — 180deg for top to bottom, 90deg for left to right, and anything in between. It is the right choice for a page background, a hero band or a button fill, because the eye reads it as a surface rather than an object. A radial gradient spreads outward from a point, which reads as a light source or a glow. Radial works for a spotlight effect behind a focal element and fails as a full-page background, where it tends to look like a vignette nobody asked for. If you cannot decide, the answer is almost always linear.
Gradients and text do not coexist easily
A gradient behind text is one of the most reliable accessibility failures on the web, for a structural reason: the contrast requirement applies to every point the text crosses, and a gradient by definition has a different background at each point. A headline that clears 4.5:1 against the light end of the gradient can fall below 3:1 against the dark end, and the passing measurement at one end tells you nothing about the other. Test the text colour against both endpoints with the contrast checker, and if either fails, the fix is a solid panel behind the text rather than a different text colour.
Restraint is what makes gradients look current
The gradients that read as contemporary are almost always subtle: two shades of the same hue a few steps apart in lightness, applied to a large surface. The ones that read as dated are high-contrast, multi-hue and applied to small elements. If you have a palette, the safest gradient is between two adjacent steps of the same colour scale — it adds depth without announcing itself. A rule of thumb that survives contact with real interfaces: if a viewer would describe your page as "the one with the gradient", the gradient is doing too much.
Performance and where to declare it
A CSS gradient is drawn by the browser rather than downloaded, so it costs no network request and stays sharp at any size — a genuine advantage over a background image, and a reason to prefer it for large flat backgrounds. Two cautions apply. Animating a gradient by changing its colour stops forces a repaint on every frame and is expensive; animate `opacity` or `transform` on a layer that holds the gradient instead. And on a very large element, a many-stop gradient costs more to paint than a two-stop one, which matters on lower-end phones where paint time is the bottleneck.
Common mistakes to avoid
- Judging a gradient by its two endpoint colours. The endpoints almost always look fine; the failure is in the middle, where sRGB interpolation drains the saturation. Look at the preview, not the swatches.
- Accepting a grey midpoint between distant hues. Add an intermediate stop on the hue you want the transition to travel through — one stop rescues most washed-out gradients.
- Putting text over a gradient and testing one end. The contrast requirement applies at every point the text crosses; check the light end and the dark end, and add a solid panel if either fails.
- Using a radial gradient as a full-page background. It reads as a vignette rather than a surface; radial is for a glow behind a focal element, linear is for backgrounds.
- Animating the colour stops. That repaints the gradient every frame — animate opacity or transform on a layer instead, which the browser can composite cheaply.
How it compares
| KeroTools | Browser dev tools | Design software | |
|---|---|---|---|
| Live preview while editing | Yes | Yes, on a live page | Yes |
| Copy-ready CSS output | Yes | Yes | Often approximate |
| Works before you build | Yes | No — needs a rendered page | Yes |
| Values sent to a server | Never | No | No |
| Account or licence | Neither | Neither | Licence required |
| Cost | Free | Free | Paid |
Features
Linear gradients
Any angle in degrees, or the keyword directions CSS accepts.
Radial gradients
Circular or elliptical, with control over where the centre sits.
Multiple colour stops
Insert intermediate colours and position them precisely along the axis.
Live preview
The gradient renders as you edit, so the muddy midpoint is visible before it ships.
Valid CSS output
A complete `background` declaration, not a fragment you have to assemble.
HEX colour input
Paste codes straight from a brand document or a palette.
No installation
Nothing to download or install — it works on the web page.
Arabic & RTL friendly
Full interface in eight languages, including right-to-left Arabic.
Secure by default
Served over HTTPS, with no file tracking and no third-party upload.
Who uses it
Front-end developers
Getting a valid gradient declaration without hand-writing angles and stop positions.
Designers
Checking how a two-colour transition actually renders before it reaches a mockup.
Anyone theming a template
Producing a hero or button background from two brand colours they already have.
Learners
Seeing what changing an angle or adding a stop does, rather than guessing at the syntax.
Frequently Asked Questions
No. Everything runs locally in your browser — nothing is uploaded, stored, or shared.
Yes — completely free, with no account and no limits.