Skip to content
ToolBoxGeniehome

CSS Gradient Generator

Developer Tools ยท Added

Drag the stops, set the angle and read off the CSS. Linear, radial and conic gradients are all here, with repeating variants, as many colour stops as a gradient can sensibly carry, and a preview that is the real thing โ€” the same value applied to a real element, not a picture of one. The output includes a flat fallback colour, which is the line most generators leave out.

Gradient type

In CSS, 0ยฐ points up and the angle turns clockwise โ€” which is not how the maths convention runs, and is the usual reason a gradient comes out mirrored.

Colour stops
0%
100%

CSS

background-color: #2563eb;
background-image: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);

The declaration includes a flat background-color first, and that line is doing real work: an element whose only background is a gradient shows nothing at all if the gradient fails to parse โ€” an unsupported syntax, an old browser, a typo in a colour. The fallback costs one line and removes that failure entirely.

How to use the css gradient generator

  1. 1Choose linear, radial or conic. Linear runs along a line, radial spreads from a point, conic sweeps around one.
  2. 2Set the angle, or the centre position for radial and conic gradients.
  3. 3Edit the colour stops โ€” change a colour, drag its position, add up to eight, or space them evenly in one click.
  4. 4Tick Repeating if you want the pattern to tile rather than run once.
  5. 5Copy the declaration. It includes a background-color fallback first, then the gradient.

Examples

A simple two-colour background

Input
Linear, 135ยฐ, #2563eb to #7c3aed
Result
background-image: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);

A spotlight behind a hero section

Input
Radial, circle, centred at 50% 20%
Result
radial-gradient(circle at 50% 20%, #fef3c7 0%, #f59e0b 100%)

Moving the centre off 50% 50% is what makes a radial gradient look like light rather than a target.

A colour wheel

Input
Conic, five stops returning to the starting hue
Result
conic-gradient(from 0deg at 50% 50%, #ef4444 0%, โ€ฆ, #ef4444 100%)

Repeating the first colour at 100% is what removes the hard seam.

About the css gradient generator

The three gradient types

A linear gradient interpolates along a line at whatever angle you set, and it is what most page backgrounds and buttons use. A radial gradient interpolates outward from a point, which reads as light falling on a surface when the centre is placed off middle. A conic gradient sweeps around a centre, which is what makes pie charts, colour wheels and the loading spinners built without an image.

All three take the same stop syntax, so what you learn on one transfers. The difference is only what the interpolation runs along: a line, a radius, or an angle.

Why gradients are cheap and images are not

A gradient is a handful of bytes of CSS that the browser rasterises at exactly the size needed, at whatever pixel density the display has. The equivalent image is a network request, a decode, a cache entry and a fixed resolution that will be wrong on some screen.

That matters most for the large decorative backgrounds gradients are usually used for, where an image would be the single largest asset on the page. It is also why a gradient scales without artefacts โ€” there is nothing to scale, only a formula to re-evaluate.

Keeping text readable on top

A gradient background means the contrast between your text and what is behind it changes across the element. Text that passes a contrast check against the light end can fail badly against the dark end, and checking only one point is how that gets missed.

The practical approach is to check the text colour against both extremes of the gradient, not the average. Where both cannot pass, the usual fixes are narrowing the range the gradient covers, putting a semi-transparent solid layer between the gradient and the text, or moving the text off the gradient entirely.

Frequently asked questions

Why does my gradient run the wrong way?
Because CSS angles are not the maths convention. In CSS, 0deg points up and the angle increases clockwise, so 90deg runs left to right. In trigonometry, 0 points right and angles increase anticlockwise. Almost every mirrored gradient comes from that difference, which is why the arrow buttons here set the common directions directly.
What is the fallback colour for?
An element whose only background is a gradient shows nothing at all if the gradient fails to parse โ€” a syntax the browser does not know, a typo in one colour, an old renderer. Declaring background-color first means the element still has a sensible background in that case. It costs one line and removes the failure mode, so the output here always includes it.
Why does my gradient look muddy in the middle?
Interpolation happens in sRGB by default, and two saturated colours from opposite sides of the wheel pass through grey on the way. Adding a third stop in the middle at the hue you actually want fixes it. Newer CSS can interpolate in other colour spaces, which avoids the problem, but browser support is not yet universal enough to rely on without a fallback.
How many colour stops is too many?
Two or three do almost all real work. Beyond that a background starts competing with the content in front of it, and each extra stop is another thing to keep consistent when the palette changes. The limit here is eight, which is well past the point where adding another improves anything.
What does repeating actually do?
It tiles the stop sequence rather than stretching it across the whole element, which is how striped and banded patterns are made without an image. It only looks right when the stops cover a short span โ€” stops running 0% to 100% have nothing left to repeat, so the result is identical to the non-repeating version.

Related tools