cssgridgen

CSS Gradient Generator

Linear, radial and conic. Up to six stops.

linear-gradient · 3 stops
background: linear-gradient(135deg, #ff7a45 0%, #d8401f 55%, #7c2d12 100%);

/* Tailwind */
bg-[linear-gradient(135deg,#ff7a45_0%,#d8401f_55%,#7c2d12_100%)]
Free tool

Gradients that keep their hue

Two things make CSS gradients look wrong more often than anything else: the angle convention, which is not the one most people assume, and fading to transparent, which quietly routes your colour through grey. Both are handled here.

How to use it

  1. Choose a type

    Linear for a direction, radial for a glow from the centre, conic for a sweep around it.

  2. Set the angle

    0deg points up and the angle runs clockwise, so 90deg is left-to-right and 180deg is top-to-bottom.

  3. Edit the stops

    Click a handle on the track to select it, then set its colour, position and alpha. Up to six stops.

  4. Copy it

    The CSS background declaration, or a Tailwind arbitrary value.

The transparent trap

transparent in CSS means transparent black. Fade any colour to it and the interpolation drags the hue toward grey on the way, which is why so many "fade out" gradients look muddy in the middle. Fading to the same colour at zero alpha keeps the hue constant. The Fade preset here demonstrates the correct form.

Angles run clockwise from up

0deg points to the top, and the value describes the direction the gradient travels toward. So 180deg goes top to bottom and 90deg goes left to right. Getting this backwards is the most common gradient bug there is.

Hard stops and stripes

Two stops at the same position produce a crisp edge rather than a blend, which turns the gradient functions into a general-purpose shape tool — stripes, split backgrounds and progress bars, all without an image.

Frequently asked questions

Which direction do CSS gradient angles go?
0deg points to the top and the angle increases clockwise, so 90deg runs left to right and 180deg runs top to bottom. The value describes where the gradient is heading, not where it starts — which is the usual source of backwards gradients.
Why does my gradient turn grey when fading to transparent?
Because transparent means transparent black, so the interpolation drags your colour toward grey on the way out. Fade to the same colour at zero alpha instead: rgb(216 64 31 / 1) to rgb(216 64 31 / 0).
How do I make a hard edge in a CSS gradient?
Put two stops at the same position: linear-gradient(90deg, red 50%, blue 50%) gives a crisp split with no blending. Repeating the trick produces stripes without an image.
What is a conic gradient used for?
It sweeps colour around a centre point rather than across or outward, which makes it the tool for pie charts, colour wheels and progress rings — all things that previously needed SVG or canvas.
How do I apply a gradient to text?
Set the gradient as the background, then background-clip: text with color: transparent. The text is punched out of the gradient. Keep a solid fallback colour for browsers that skip the clip.
How do I use a custom gradient in Tailwind?
Tailwind's bg-gradient-to-r with from-, via- and to- covers simple cases using palette colours. Custom stop positions or more than three stops need an arbitrary value, which is what this tool outputs.

Related tools