Angles, and why 135 shows up everywhere
In linear-gradient the angle names the direction the gradient runs toward, measured clockwise from straight up. 0deg goes bottom to top, 90deg left to right, 180deg top to bottom, 270deg right to left. Omitting the angle gives you 180deg, the same as to bottom. 135deg runs from the top-left corner toward the bottom-right, which is the diagonal that reads as natural lighting in a left-to-right interface, and that is most of why it turns up on every card and hero section.
The keyword forms — to right, to bottom left — are worth knowing because corner keywords do something angles cannot: to bottom right aims at the actual corner regardless of the box proportions, so the gradient stays anchored when the element resizes. A fixed 135deg does not. For conic-gradient, the from angle sets where the sweep begins, measured from twelve o'clock. radial-gradient takes no angle at all — it takes a shape and a center, and optionally a size keyword such as farthest-corner.
Stops and the grey middle
A percentage after a color says where that color is at full strength. Between two stops the browser interpolates, by default in sRGB, one channel at a time. That is why blue to yellow crosses through a dead grey: the midpoint of those two RGB triples is close to neutral, and no amount of adjusting the ends fixes it. Adding a third stop lets you route the transition through a color you chose instead — orange between them, for instance — and the whole run brightens.
Moving the middle stop off 50% changes the pacing rather than the palette. At 30% the first transition happens fast and the second one drags. Two stops at the same position produce a hard edge with no blend at all, which is how CSS stripes are built; this tool only emits smooth transitions.
Modern CSS also lets you name the interpolation space — linear-gradient(in oklch, …) keeps perceived lightness even across the run and avoids the grey midpoint without a third stop. Support is recent enough that a plain sRGB gradient is still the safer output, which is what you get here.
Text on top of a gradient
WCAG contrast is defined between two flat colors. A gradient has a different effective contrast at every point, so the only meaningful test is the worst point along the run. A heading that clears 7:1 at the dark end and 2:1 at the light end has failed, and averaging the two is not a defence.
Three approaches work. Keep both ends within a narrow luminance band so one text color holds throughout — the relative luminance figures in the results are there for exactly this check. Or put the text on a flat scrim, a semi-transparent panel, so it is no longer sitting on the gradient at all. Or confine the gradient to a region the text does not cross.
Pairings that hold up
| Use | Start | End | Angle |
|---|---|---|---|
| Indigo to pink, product hero | #6366f1 | #ec4899 | 135 |
| Night sky, section background | #0f172a | #3b82f6 | 180 |
| Sunset | #f97316 | #7c3aed | 160 |
| Teal to sky | #14b8a6 | #0ea5e9 | 90 |
| Warm off-white page wash | #fdf2e9 | #fce7f3 | 135 |
| Dark card, barely visible | #1f2937 | #111827 | 180 |
| Brushed metal, radial | #e5e7eb | #9ca3af | n/a |
The last two are the ones to study. A gradient that is almost imperceptible does more work in an interface than a saturated one, because it suggests a light source without competing with the content sitting on it. If you can name the gradient from across the room, it is probably too strong for a background.
Questions people ask
Do I still need -webkit- and -moz- prefixes for gradients?
No. The unprefixed syntax has been supported by every current browser since around 2013 for linear and radial gradients, and since 2020 for conic. Prefixed versions also used a different, older syntax with a different angle convention, so pasting an old prefixed rule alongside a modern one frequently produces two gradients running in opposite directions. The flat color declared before the gradient is a sufficient fallback.
How do I add a fourth or fifth color?
Edit the emitted value. The stop list is just comma-separated pairs of a color and a position, so adding "#22c55e 65%" in the right place extends it. Positions must be non-decreasing; if one is lower than the stop before it, the browser clamps it up to match, which silently produces a hard edge instead of the blend you wanted.
Can a gradient fade to transparent?
Yes, and it is worth knowing the trap. Writing "#000000, transparent" fades through translucent grey in some browsers because "transparent" is rgba(0,0,0,0) and the interpolation runs through the color channels as well as alpha. Name the same color at both ends instead — "rgba(0,0,0,0.6), rgba(0,0,0,0)" — and the fade stays clean. That two-stop form is the standard overlay for putting text over a photograph.
Why does my conic gradient have a visible seam?
Because the sweep ends where it began, and unless the first and last stops are the same color there is a discontinuity at that angle. For a color wheel or a smooth ring, repeat the starting color as the final stop. The seam sits at the "from" angle, so rotating it moves the seam somewhere less noticeable rather than removing it.