# Tailwind gradient classes: linear, radial and conic in v4

[Canonical HTML page](https://gradiently.design/guide/tailwind-gradient)

Tailwind v4 renamed its gradient utilities, added angles, radial and conic gradients, and switched the default blend to oklab. Here is the whole system, with the CSS each class produces.

## The short version

- In Tailwind CSS v4, linear gradients use bg-linear-to-* for directions and bg-linear-<angle> for angles, replacing the bg-gradient-to-* names from v3.
- Colours are added with from-*, via-* and to-* utilities, and their positions with percentage utilities such as from-10% and to-90%.
- Tailwind v4 adds bg-radial and bg-conic utilities, with arbitrary values for positions such as bg-radial-[at_25%_25%].
- Tailwind v4 gradients blend in oklab by default, and modifiers such as /oklch, /srgb and /longer change the interpolation.
- Any gradient Tailwind cannot express with utilities can be written as an arbitrary value, such as bg-linear-[25deg,red_5%,yellow_60%].

A **Tailwind gradient** is built from two kinds of utility: one that sets the gradient type and direction, such as `bg-linear-to-r`, and colour stop utilities that fill it, such as `from-indigo-500 to-pink-500`. In Tailwind CSS v4 the direction utilities were renamed from `bg-gradient-to-*` to `bg-linear-to-*`, angles like `bg-linear-45` became possible without custom CSS, and radial and conic gradients arrived as first-class utilities.

```html
<div class="h-32 rounded-2xl bg-linear-to-r from-indigo-500 to-pink-500"></div>
```

A left to right gradient from indigo to pink. No custom CSS needed.

from-indigo-500 to-pink-500: `linear-gradient(to right in oklab, oklch(58.5% 0.233 277.117), oklch(65.6% 0.241 354.308))`

What that class list renders: `to right in oklab`, with Tailwind's default indigo-500 and pink-500.

Everything here follows the official [Tailwind background-image documentation](https://tailwindcss.com/docs/background-image). If you want to know what the generated CSS is doing, the [CSS linear gradient](https://gradiently.design/guide/css-linear-gradient) guide explains the function underneath.

## Linear gradients: directions and angles

`bg-linear-to-t`, `-tr`, `-r`, `-br`, `-b`, `-bl`, `-l` and `-tl` point the gradient at a side or corner. For any other direction, use an angle: `bg-linear-45` or `bg-linear-160`. Prefix a minus sign for negative angles, as in `-bg-linear-45`.

| Class | Generated direction | Replaces in v3 |
| --- | --- | --- |
| `bg-linear-to-r` | `to right in oklab` | `bg-gradient-to-r` |
| `bg-linear-to-br` | `to bottom right in oklab` | `bg-gradient-to-br` |
| `bg-linear-45` | `45deg in oklab` | an arbitrary value |
| `bg-linear-to-b/srgb` | `to bottom in srgb` | the v3 default blend |
| `bg-(image:--brand-gradient)` | `var(--brand-gradient)` as the whole image | `bg-[image:var(--x)]` |

Direction utilities in Tailwind v4 and the CSS they produce.

Under the hood, a direction utility sets a variable called `--tw-gradient-position` and writes `background-image: linear-gradient(var(--tw-gradient-stops))`, while the colour utilities fill `--tw-gradient-stops`. The `in oklab` part is added inside an `@supports` check, so browsers without interpolation support still get a working sRGB gradient. That split is also why direction and colours can change independently, for example only the end colour on hover or in dark mode with `dark:to-violet-900`.

> **Upgrading from v3** Old `bg-gradient-to-r` classes still compile in v4, so an upgraded project will not break. Rename them to `bg-linear-to-r` as you touch each file, and expect colours to look slightly brighter in the middle, because the blend is now oklab.

## Colour stops: from, via and to

`from-*` sets the start colour, `to-*` the end colour, and `via-*` adds one colour in the middle. Every colour in your theme works, including opacity modifiers such as `from-indigo-500/60`. Add a percentage utility after a colour to move its stop: `from-10%`, `via-30%`, `to-90%`. Arbitrary positions work too, as in `from-[21.5%]`.

```html
<!-- three stops, evenly spaced -->
<div class="bg-linear-to-r from-indigo-500 via-sky-500 to-emerald-500"></div>

<!-- the same stops, pulled towards the edges -->
<div class="bg-linear-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90%"></div>
```

Positions change where each colour is fully itself.

- Even: indigo, sky, emerald: `linear-gradient(to right in oklab, oklch(58.5% 0.233 277.117), oklch(68.5% 0.169 237.323), oklch(69.6% 0.17 162.48))`
- Positioned: 10%, 30%, 90%: `linear-gradient(to right in oklab, oklch(58.5% 0.233 277.117) 10%, oklch(68.5% 0.169 237.323) 30%, oklch(69.6% 0.17 162.48) 90%)`

The two class lists above, rendered.

## Radial and conic gradients in Tailwind v4

`bg-radial` draws a radial gradient from the centre, and the same colour stop utilities fill it. Move the centre with an arbitrary value, where underscores stand in for spaces: `bg-radial-[at_25%_25%]`. `bg-conic` sweeps colours around the centre, and `bg-conic-180` rotates the starting angle.

```html
<div class="size-24 rounded-full bg-radial-[at_25%_25%] from-white to-zinc-900 to-75%"></div>

<div class="size-24 rounded-full bg-conic-180 from-indigo-600 via-indigo-50 to-indigo-600"></div>
```

A lit sphere and a metallic disc, each in one line.

- bg-radial-[at_25%_25%]: `radial-gradient(at 25% 25% in oklab, #ffffff, oklch(21% 0.006 285.885) 75%)`
- bg-conic-180: `conic-gradient(from 180deg in oklab, oklch(51.1% 0.262 276.966), oklch(96.2% 0.018 272.314), oklch(51.1% 0.262 276.966))`

Approximate renders of the two elements above. For the underlying functions, see [CSS radial gradients](https://gradiently.design/guide/css-radial-gradient) and [CSS conic gradients](https://gradiently.design/guide/css-conic-gradient).

## Interpolation modifiers: oklab, oklch and hue direction

Tailwind v4 blends gradients in oklab by default, which already avoids most grey midpoints. Add a modifier after the direction to change it: `/srgb` matches older designs, `/oklch` keeps saturation high between distant hues, and `/longer`, `/shorter`, `/increasing` and `/decreasing` choose the hue direction. The reasoning is in [CSS gradient OKLCH interpolation](https://gradiently.design/guide/css-gradient-oklch).

- bg-linear-to-r/srgb: `linear-gradient(to right in srgb, oklch(58.5% 0.233 277.117), oklch(77.7% 0.152 181.912))`
- bg-linear-to-r (oklab): `linear-gradient(to right in oklab, oklch(58.5% 0.233 277.117), oklch(77.7% 0.152 181.912))`
- bg-linear-to-r/oklch: `linear-gradient(to right in oklch, oklch(58.5% 0.233 277.117), oklch(77.7% 0.152 181.912))`
- bg-linear-to-r/longer: `linear-gradient(to right in oklch longer hue, oklch(58.5% 0.233 277.117), oklch(77.7% 0.152 181.912))`

`from-indigo-500 to-teal-400` with four interpolation settings. The last one takes the long way round the hue circle.

## Custom gradients and brand colours

For brand colours, add them to your theme and they become available to every colour utility, including `from-*`, `via-*` and `to-*`. For a gradient the utilities cannot express, such as four or more stops or an unusual angle, use an arbitrary value with underscores for spaces, or point a utility at a custom property.

```css
@import "tailwindcss";

@theme {
  --color-dusk: oklch(28% 0.09 285);
  --color-ember: oklch(70% 0.19 40);
}

:root {
  --brand-gradient: linear-gradient(135deg in oklch, var(--color-dusk), var(--color-ember));
}
```

Theme colours for the stop utilities, and a full gradient kept in one custom property.

```html
<!-- brand colours through the stop utilities -->
<div class="bg-linear-135 from-dusk to-ember"></div>

<!-- the whole gradient from a custom property -->
<div class="bg-(image:--brand-gradient)"></div>

<!-- a one-off arbitrary gradient -->
<div class="bg-linear-[25deg,red_5%,yellow_60%,lime_90%,teal]"></div>
```

Three ways to go beyond the default palette.

Keeping the brand gradient in one variable means it is written once and used everywhere, which is what makes a gradient recognisable. [Gradient branding](https://gradiently.design/guide/gradient-branding) explains why that consistency matters more than the colours themselves.

## Gradient text and hover states in Tailwind

Gradient text uses the same classes plus `bg-clip-text` and `text-transparent`. Variants work on stop utilities, so `hover:from-pink-500` changes a colour on hover. Gradients themselves do not transition, so for a smooth hover, fade an overlay's opacity or move `bg-position` instead of swapping stops.

```html
<h1 class="bg-linear-to-r from-violet-600 to-rose-600 bg-clip-text text-5xl font-bold text-transparent">
  Launch day
</h1>

<a class="bg-linear-to-r from-violet-600 to-rose-600 bg-size-[200%_100%] bg-left px-5 py-3 text-white transition-[background-position] duration-500 hover:bg-right">
  Get started
</a>
```

Gradient text, and a button whose gradient slides on hover.

### Avoid

- Copying v3 `bg-gradient-to-r` into new v4 projects
- Long class lists repeated on every card
- `/srgb` on blends between distant hues
- Swapping stops on hover and expecting a smooth fade

### Do

- Use `bg-linear-to-*` and `bg-linear-<angle>`
- Theme colours or a custom property for brand gradients
- Keep the default oklab, or try `/oklch` for vivid blends
- Animate position or an overlay's opacity

More on the text technique, including contrast and fallbacks, is in [gradient text in CSS](https://gradiently.design/guide/css-gradient-text).

## FAQ

### How do I make a gradient in Tailwind CSS?

Combine a direction utility with colour stops, for example `bg-linear-to-r from-indigo-500 to-pink-500`. Add `via-*` for a middle colour.

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

`bg-linear-to-r`. The v4 names are `bg-linear-to-*` for directions and `bg-linear-<angle>` for angles such as `bg-linear-45`.

### Does Tailwind support radial and conic gradients?

Yes, from v4: `bg-radial` and `bg-conic`, with arbitrary positions such as `bg-radial-[at_25%_25%]` and angles such as `bg-conic-180`.

### How do I make gradient text in Tailwind?

Add `bg-clip-text` and `text-transparent` to an element with gradient classes, such as `bg-linear-to-r from-violet-600 to-rose-600`.

### Why do my Tailwind v4 gradients look different from v3?

v4 blends in oklab by default and its default palette is defined in oklch. Add `/srgb` to the direction utility to get the older blend.