CSS Gradient Generator
Linear, radial and conic. Up to six stops.
background: linear-gradient(135deg, #ff7a45 0%, #d8401f 55%, #7c2d12 100%);
/* Tailwind */
bg-[linear-gradient(135deg,#ff7a45_0%,#d8401f_55%,#7c2d12_100%)]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
-
Choose a type
Linear for a direction, radial for a glow from the centre, conic for a sweep around it.
-
Set the angle
0deg points up and the angle runs clockwise, so 90deg is left-to-right and 180deg is top-to-bottom.
-
Edit the stops
Click a handle on the track to select it, then set its colour, position and alpha. Up to six stops.
-
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?
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?
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?
How do I apply a gradient to text?
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?
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.