CSS linear-gradient(): angles, corners and recipes
The straight-line gradient covers the large majority of gradients actually used on the web — hero washes, button sheens, fade-to-transparent overlays. The angle system is simpler than radial-gradient() or conic-gradient(), but it has one genuinely counter-intuitive corner. Build one below, or read the specifics first.
Build a linear gradient
Colour stops
Presets
Full syntax
The direction argument is optional — omit it and the default is to bottom (180deg). Everything after it is a comma-separated list of colour stops, each an optional position from 0% to 100%.
Degrees vs. keywords
| Keyword | Equivalent angle |
|---|---|
| to top | 0deg |
| to right | 90deg |
| to bottom | 180deg (the default) |
| to left | 270deg |
Those four are exact, fixed equivalences. Corner keywords are not — see below.
"to top left" is not 135deg. A corner keyword is solved so the gradient line passes exactly through that corner of the box, and the angle that achieves that depends on the box's own aspect ratio. It only works out to 135deg for a perfect square. A wide, short box needs an angle much closer to 90deg to still reach the top-left corner; a tall, narrow one needs something closer to 0deg. If the design calls for a fixed 135deg regardless of the element's proportions, write 135deg directly instead of to top left — this tool's angle control always outputs the fixed numeric form for exactly that reason.
Common recipes
Fade to transparent (for a text scrim)
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%);
Keep the RGB channels identical at both ends and vary only the alpha. Fading a solid colour straight to the bare transparent keyword instead can show a faint colour shift partway through, because transparent resolves to black at 0% alpha and the RGB channels get interpolated too.
A brand wash at a fixed 135deg
background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
Written as a numeric angle rather than to bottom right, so the direction stays identical no matter how the box is resized or reflowed.
A three-stop banner gradient
background: linear-gradient(90deg,
#134e5e 0%, #2f7a63 50%, #71b280 100%);
A middle stop gives you a colour to pass through, not just start and end at — useful when two brand colours alone would meet in a muddy middle.
Linear gradient questions people actually ask
What is the difference between an angle and a keyword like "to right"?
A keyword is shorthand for one specific angle relative to the box: to top is 0deg, to right is 90deg, to bottom is 180deg, to left is 270deg. Anything not aimed at a plain side needs a numeric angle — there is no keyword for 37deg. Keywords read slightly clearer in source for the four cardinal directions; degrees are needed for everything else.
Does "to top left" mean 135deg?
No, and this is the most common wrong assumption about linear gradients. A corner keyword is defined to make the gradient line pass exactly through that corner of the box, and the angle needed to do that depends on the box's own width-to-height ratio — it is only 135deg for a perfect square. A short, wide box needs an angle much closer to 90deg to still hit the top-left corner; a tall, narrow box needs one much closer to 0deg. If you want a fixed, size-independent 135deg, set 135deg directly rather than using the corner keyword.
How do I fade a colour to transparent instead of to another colour?
Use the same colour at both ends with different alpha: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%). Fading to a fully opaque colour and then to "transparent" as a keyword is a common mistake — CSS interpolates transparent as the colour black with zero alpha, so fading a bright colour straight to the transparent keyword can produce a visible dark or grey band partway through, because the RGB channels are being interpolated too, not just the alpha. Keeping the RGB channels identical and only changing alpha avoids that entirely.
Can I put more than one linear-gradient in a single background?
Yes. background-image accepts a comma-separated list of images, and a gradient function is a valid image value, so background: linear-gradient(...), linear-gradient(...); layers two gradients on top of each other — the first listed is on top. This is how you stack a directional colour wash under a separate vignette without extra markup. This tool builds one gradient at a time; layering several is a matter of pasting more than one output into the same background-image list by hand.
Is there a repeating version of linear-gradient?
Yes — repeating-linear-gradient() takes the same arguments and tiles the pattern defined between the first and last stop for as long as the element is. It is genuinely useful for stripes, ruled-paper effects and progress-bar textures, but it is a distinct function this tool does not generate; the hard-stop technique covered on the main gradient page (two stops sharing one position) covers a single repeat, which is what most "stripe" requests actually need.
Does the angle depend on the size or shape of the element?
A numeric angle does not — 45deg is 45deg whether the box is a square or a wide banner, because it is defined against true compass directions, not the box's diagonal. A corner keyword does depend on the box, for the reason covered above: it is solved per-box so the line always passes through that exact corner.