Upgraded syntax and modern color spaces

Tailwind CSS v4 ships with a rewritten engine and a CSS-first configuration model. Along with these architectural changes, the framework overhauled its gradient utilities.

One of the most noticeable changes is the semantic upgrade to linear gradient classes. The legacy bg-gradient-to-* prefix has been replaced with the cleaner bg-linear-to-*. Furthermore, Tailwind CSS v4 compiles all standard gradients using the perceptually uniform Oklab color space by default. This prevents the desaturated midpoints that plagued legacy sRGB interpolation.

<!-- Deprecated Tailwind CSS v3 Syntax -->
<div class="bg-gradient-to-r from-blue-500 to-pink-500"></div>

<!-- Modern Tailwind CSS v4 Syntax (Oklab by default) -->
<div class="bg-linear-to-r from-blue-500 to-pink-500"></div>

You can easily override the default interpolation space by appending a modifier:

<!-- Force interpolation in the polar OKLCH color space -->
<div class="bg-linear-to-r/oklch from-indigo-500 via-purple-500 to-pink-500"></div>

Radial and conic gradients are also first-class utilities in v4. Apply radial gradients with bg-radial and conic gradients with bg-conic—no custom configuration needed.

CSS-first custom properties and compiler troubleshooting

Tailwind CSS v4 shifts theme customization directly into CSS files using the @theme directive. Custom variables are registered as CSS custom properties and automatically mapped to corresponding utility classes.

Try the tool →
@import "tailwindcss";

@theme {
  --color-brand-teal: oklch(0.75 0.14 180);
  --color-brand-cyan: oklch(0.78 0.16 210);
  
  /* Registering a custom gradient token */
  --image-brand-glow: linear-gradient(135deg in oklch, var(--color-brand-teal), var(--color-brand-cyan));
}

Once defined, this gradient is immediately available in your HTML via the bg-brand-glow utility class.

For dynamic runtime values, you can reference a CSS custom property directly. However, the compiler may not be able to infer whether your variable holds a color or an image. To prevent it from generating background-color instead of background-image, add an explicit type hint:

<!-- Using the image hint to ensure reliable runtime compilation -->
<div class="bg-(image:--my-gradient-stops)"></div>

If you need to generate framework-compliant gradient classes or custom theme tokens quickly, check out the CSS gradient generator. It supports direct Tailwind CSS v4 configuration exports, saving you from writing @theme directives by hand.