concept — v4 renamed & expanded gradients
Tailwind v4 did two things to gradients. First, it renamed
linear gradients — bg-gradient-to-* → bg-linear-to-*
(the old name still works as a deprecated alias, but the docs and IDE
autocomplete push the new one). Second, it added
two whole families the engine never had as utilities:
bg-radial (radial gradients) and bg-conic (conic
gradients). Color stops from-* / via-* / to-*
stayed identical — but they now accept position modifiers (from-50%)
and the linear angle can be any number (bg-linear-45).
| gradient type | v4 utility | css it compiles to | new in v4? |
|---|---|---|---|
| linear (direction) | bg-linear-to-r |
linear-gradient(to right, …) |
renamed from bg-gradient-to-r |
| linear (angle) | bg-linear-45 |
linear-gradient(45deg, …) |
✅ new (any integer angle) |
| radial | bg-radial |
radial-gradient(…) |
✅ new |
| radial (positioned) | bg-radial-[at_top_left] |
radial-gradient(at top left, …) |
✅ new |
| conic | bg-conic |
conic-gradient(…) |
✅ new |
| conic (from angle) | bg-conic-[from_180deg] |
conic-gradient(from 180deg, …) |
✅ new |
1 · linear gradients — directions, angles & multi-stop
bg-linear-to-r / bg-linear-to-br set direction by
keyword. bg-linear-<angle> (e.g. bg-linear-45)
takes any integer degree. Add a third stop with via-*.
bg-linear-to-r from-cyan-500 to-blue-500bg-linear-to-br from-cyan-500 to-blue-500bg-linear-45 from-cyan-500 to-blue-500from-purple-500 via-pink-500 to-red-500from-yellow-400 via-emerald-500 to-sky-500bg-linear-135 from-indigo-500 to-rose-5002 · radial gradients — centered & positioned
bg-radial radiates from center outward. Position the focal
point with an arbitrary value like bg-radial-[at_top_left]
(underscores → spaces). Pair from-* with to-transparent
for a vignette/glow.
bg-radial from-cyan-500 to-transparentbg-radial-[at_top_left] from-cyan-500 to-transparentbg-radial-[at_top_right] from-pink-500 to-transparentbg-radial-[at_bottom] from-amber-400 to-transparentbg-radial from-violet-500 via-fuchsia-500 to-transparentbg-radial-[at_30%_30%] from-emerald-400 to-slate-9003 · conic gradients — rotation around a point
bg-conic sweeps color around a center point (like a pie chart).
bg-conic-[from_180deg] rotates the starting angle. Best for
color wheels, spinners, and angular highlights.
bg-conic from-cyan-500 via-blue-500 to-cyan-500bg-conic-[from_180deg] from-cyan-500 to-blue-500bg-conic from-rose-500 via-yellow-400 to-emerald-500bg-conic-[from_90deg_at_50%_50%] …4 · OKLCH vs sRGB interpolation — the truth
Common myth: "v4 gradients interpolate in OKLCH, so red→blue goes
through vivid purple." Reality: v4's color STOPS are OKLCH tokens,
but the CSS engine interpolates linear-gradient(...) in
sRGB by default — the midpoint is still a muddy gray-brown. To get a
true perceptual path (vivid purple midpoint), you must add an explicit
in oklch interpolation method via an arbitrary value.
bg-linear-to-r from-red-500 to-blue-500midpoint = muddy gray (sRGB interpolation)
bg-[linear-gradient(in_oklch_to_right,var(--color-red-500),var(--color-blue-500))]midpoint = vivid purple
from-emerald-500 to-fuchsia-500gray-ish midpoint
bg-[linear-gradient(in_oklch_to_right,…emerald…,…fuchsia…)]saturated midpoint
Both rows use the same OKLCH stop colors. The only difference is the
interpolation method. Underscores in the arbitrary value become spaces;
var(--color-red-500) pulls v4's OKLCH token directly.
5 · color stop positions — from-50% / via-30% / to-100%
Append a percentage to a stop to pin where it sits along the gradient line. Without positions, stops distribute evenly. With positions, you control the transition sharpness — push two stops close together for a hard edge.
from-cyan-500 from-0% to-blue-500 to-100%from-20% … to-80% — solid color at the edgesvia-purple-500 via-50%via-purple-500 via-20% — early crossover6 · interactive gradient builder
Pick from / via / to colors and a
type/direction. The builder assembles the Tailwind class string, applies it
to the preview, and prints the background-image the browser
actually computed — so you can see exactly what v4 emits.
intent → pattern
| intent | pattern | why |
|---|---|---|
| basic left-to-right gradient | bg-linear-to-r from-cyan-500 to-blue-500 |
v4 renamed bg-gradient-to-r → bg-linear-to-r |
| exact angle | bg-linear-45 |
any integer degree — bg-linear-135, bg-linear-90, … |
| three colors | from-a via-b to-c |
via-* injects a middle stop |
| radial glow / vignette | bg-radial from-cyan-500 to-transparent |
new in v4 — radiates from center |
| off-center radial | bg-radial-[at_top_left] |
arbitrary position; underscores → spaces |
| color wheel / spinner | bg-conic from-a via-b to-c |
new in v4 — sweeps around a point |
| rotate conic start | bg-conic-[from_180deg] |
arbitrary from-angle |
| pin a stop's position | from-cyan-500 from-20% to-blue-500 to-80% |
position modifier sharpens/softens the transition |
| true OKLCH interpolation | bg-[linear-gradient(in_oklch_to_right,var(--color-red-500),var(--color-blue-500))] |
default is sRGB; explicit in oklch gives vivid midpoints |
| gradient text | bg-linear-to-r from-a to-b bg-clip-text text-transparent |
clip gradient to glyph shapes |