What replaced bg-gradient-to-r in Tailwind v4?

bg-linear-to-r. v4 also adds bg-linear- , bg-radial and bg-conic, stop positions (from-10%), and interpolation modifiers (/oklch, /srgb, /longer). The default interpolation is OKLab.

How do I make a Tailwind gradient interpolate in OKLCH?

Add the modifier to the shape utility: bg-linear-to-r/oklch from-indigo-500 to-teal-400. Use /longer, /increasing or /decreasing to control the hue arc.

Technique

Tailwind gradients

Generate Tailwind v4 gradient classes (bg-linear-to-r/oklch from-… via-… to-…) with stop positions and interpolation modifiers, and see what changed from v3's bg-gradient-to-*. Live generator, contrast report, copyable classes.

Open in the full maker →

Aa — the quick brown fox

black text · worst 3.34:1 · AA large only

banding medium · 10.14px

2 stops · click the track to add · drag to move · select to edit

classesbg-linear-to-r/oklch from-[#4f46e5] to-[#2dd4bf]

Export

CSS with the interpolation space, Tailwind v4, SVG with correct geometry, a DTCG token, and the PNG.

Apply this to a brand → sign in

.gradient {
  background-image: linear-gradient(90deg, #4f46e5 0%, #3f55ea 7.14%, #2964ed 14.29%, #0071ee 21.43%, #007dee 28.57%, #008ae2 35.71%, #0094dc 42.86%, #009dd7 50%, #00a6d4 57.14%, #00afd2 64.29%, #00b7cf 71.43%, #00bfcd 78.57%, #00c8ca 85.71%, #00cec4 92.86%, #2dd4bf 100%);
  background-image: linear-gradient(90deg in oklch shorter hue, #4f46e5 0%, #2dd4bf 100%);
}

How it works

Tailwind v4 renamed the gradient utilities and, more importantly, made them colour-space-aware. bg-gradient-to-r is now bg-linear-to-r; arbitrary angles are bg-linear-45; there are bg-radial and bg-conic; and every one takes a modifier for the interpolation space — /oklch, /srgb, /hsl — or the hue arc, /longer, /increasing. The default is OKLab, so a v4 gradient with no modifier is already perceptual; the /oklch form is the one that keeps the midpoint vivid. Every page written against v3 syntax is now stale, which is why the generator above emits the v4 form and nothing else.

v3 → v4

v3	v4
bg-gradient-to-r	bg-linear-to-r
bg-gradient-to-br	bg-linear-to-br
bg-[linear-gradient(45deg,…)]	bg-linear-45
(no radial utility)	bg-radial, bg-radial-[at_25%_25%]
(no conic utility)	bg-conic, bg-conic-180
(sRGB only)	/oklab (default), /oklch, /srgb, /hsl, /longer …
from-… via-… to-… (colours only)	from-10% via-30% to-90% positions too

Stop positions and arbitrary colours

html · positioned stops

<div class="bg-linear-to-r/oklch from-indigo-600 from-10% via-sky-400 via-50% to-teal-400 to-90%"></div>

html · exact hexes (what the generator emits)

<div class="bg-linear-to-r/oklch from-[#4f46e5] to-[#2dd4bf]"></div>

A gradient with more than three stops, eased stops, or alpha falls outside what from-/via-/to- can express; the exporter then emits the whole function as an arbitrary value (bg-[linear-gradient(…)]) — still v4, still the interpolation space you chose.

Starting point, as code

css

.gradient {
  background-image: linear-gradient(90deg, #4f46e5 0%, #3f55ea 7.14%, #2964ed 14.29%, #0071ee 21.43%, #007dee 28.57%, #008ae2 35.71%, #0094dc 42.86%, #009dd7 50%, #00a6d4 57.14%, #00afd2 64.29%, #00b7cf 71.43%, #00bfcd 78.57%, #00c8ca 85.71%, #00cec4 92.86%, #2dd4bf 100%);
  background-image: linear-gradient(90deg in oklch shorter hue, #4f46e5 0%, #2dd4bf 100%);
}

tailwind v4

bg-linear-to-r/oklch from-[#4f46e5] to-[#2dd4bf]

svg

<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="600" viewBox="0 0 1440 600"><defs><linearGradient id="bs-gradient" gradientUnits="userSpaceOnUse" x1="0" y1="300" x2="1440" y2="300"><stop offset="0%" stop-color="#4f46e5"/><stop offset="7.14%" stop-color="#3f55ea"/><stop offset="14.29%" stop-color="#2964ed"/><stop offset="21.43%" stop-color="#0071ee"/><stop offset="28.57%" stop-color="#007dee"/><stop offset="35.71%" stop-color="#008ae2"/><stop offset="42.86%" stop-color="#0094dc"/><stop offset="50%" stop-color="#009dd7"/><stop offset="57.14%" stop-color="#00a6d4"/><stop offset="64.29%" stop-color="#00afd2"/><stop offset="71.43%" stop-color="#00b7cf"/><stop offset="78.57%" stop-color="#00bfcd"/><stop offset="85.71%" stop-color="#00c8ca"/><stop offset="92.86%" stop-color="#00cec4"/><stop offset="100%" stop-color="#2dd4bf"/></linearGradient></defs><rect width="1440" height="600" fill="url(#bs-gradient)"/></svg>

Questions

What replaced bg-gradient-to-r in Tailwind v4?: bg-linear-to-r. v4 also adds bg-linear-<angle>, bg-radial and bg-conic, stop positions (from-10%), and interpolation modifiers (/oklch, /srgb, /longer). The default interpolation is OKLab.
How do I make a Tailwind gradient interpolate in OKLCH?: Add the modifier to the shape utility: bg-linear-to-r/oklch from-indigo-500 to-teal-400. Use /longer, /increasing or /decreasing to control the hue arc.

The full maker Mesh gradients →Grainy gradients →Conic gradients →

mcpConnect your agent to the gradient engine

live endpoint

Point any MCP client at the shared gradients endpoint and your agent gets the same engine as this page — make_gradient returns CSS with the interpolation space, Tailwind v4, SVG, a PNG URL, a DTCG token and the contrast report in one call; brand_gradients derives the whole contact sheet from a brand or a palette. Read-only, no key. Every gradient is a /gradients/new/… link: open it, refine, paste it back.

endpointhttps://mcp.brandsweets.com/gradients/mcp

claude mcp add --transport http brandsweets-gradients https://mcp.brandsweets.com/gradients/mcp

try this prompt

›give me the Tailwind v4 classes for an indigo to teal gradient interpolated in oklch

Want the agent to remember your picks and write them into a living brand? Create a free BrandSweets workspace.