Tailwind CSS 21 🎨 Linear, Radial, and Conic Gradients Syntax and Color Stops
A gradient is not a color. It is an image—a smooth transition between two or more colors, painted as the background of an element. This distinction matters in Tailwind CSS because gradients live in the background-image utilities, not the background-color utilities. The syntax has evolved significantly across Tailwind versions, and the version you are using determines which classes are available. Tailwind v3 offers linear gradients through direction-based utilities. Tailwind v4 introduced native radial and conic gradients, replaced the bg-gradient-to-* naming with bg-linear-*, and added angle-based linear utilities.
This chapter covers gradient syntax and color stops across all three gradient types. You will learn the direction and angle utilities, the from-, via-, and to- color stop system, and how to use arbitrary values and stop positions when the built-in utilities are not enough. The goal is not just to memorize class names but to understand the underlying model: Tailwind exposes CSS gradient functions through composable utilities that read from CSS custom properties.
Key point: Tailwind gradients are built from two parts: the gradient function (linear, radial, or conic) and the color stops (from-*, via-*, to-*). The gradient function sets the shape and direction; the color stops fill in the colors. Neither works without the other.
Why gradient utilities exist
The CSS verbosity problem. Writing a linear gradient in plain CSS requires the full function syntax: linear-gradient(to right, #06b6d4, #3b82f6). Changing the direction or a color means editing the entire declaration. Tailwind breaks this into composable pieces: one class for direction, separate classes for each color stop. Changing the direction is a matter of swapping bg-linear-to-r for bg-linear-to-b. Changing a color is swapping from-cyan-500 for from-red-500.
The consistency problem. Raw CSS gradients require you to remember color values or reference theme variables manually. Tailwind’s gradient color stops integrate with the theme: from-red-500 pulls from the same palette as bg-red-500 and text-red-500. The colors stay consistent across your project without duplication.
The interpolation problem. CSS gradients interpolate between colors in the sRGB color space by default. Tailwind v4 changed this: gradients now interpolate in OKLab by default, which produces more vibrant and perceptually smooth transitions. This is not just a syntax change; it is a change in how the colors blend. The bg-linear-* utilities encode this interpolation mode, and the arbitrary value syntax lets you override it when needed.
The gradient type expansion. Tailwind v3 supported linear gradients only. Radial and conic gradients required arbitrary values or third-party plugins. Tailwind v4 added native support for all three types: bg-linear-*, bg-radial, and bg-conic. This means you no longer need plugins to create a color wheel or a spotlight effect.
The migration problem. If you are moving from v3 to v4, the class names changed. bg-gradient-to-r became bg-linear-to-r. The old names may still work for backward compatibility, but the new names are the future. Understanding both is necessary for working across codebases of different vintages.
a. Linear gradients: directions and angles
Linear gradients transition colors along a straight line. Tailwind provides direction-based utilities and, in v4, angle-based utilities.
Direction utilities use named directions rather than angles. The available classes in v4 are bg-linear-to-t, bg-linear-to-tr, bg-linear-to-r, bg-linear-to-br, bg-linear-to-b, bg-linear-to-bl, bg-linear-to-l, and bg-linear-to-tl. These map to the CSS linear-gradient(to <direction>, ...) syntax.
<div class="bg-linear-to-r from-cyan-500 to-blue-500"></div>The to-r means the gradient runs toward the right. The color starts with from-cyan-500 at the left and ends with to-blue-500 at the right. The direction is the direction of the gradient line, not the position of the colors.
Angle utilities in v4 use bg-linear-{angle} where the angle is in degrees. bg-linear-45 produces a 45-degree gradient. Negative angles are supported with a leading dash: -bg-linear-45.
<div class="bg-linear-45 from-indigo-500 to-pink-500"></div>
<div class="bg-linear-90 from-red-500 to-blue-500"></div>The angle is measured clockwise from the top (0 degrees points up). This matches the CSS linear-gradient(<angle>, ...) syntax. The arbitrary value form bg-linear-[25deg,red_5%,yellow_60%,lime_90%] allows complete control, including multiple stops and positions in a single class.
The arbitrary value form is the escape hatch. When the built-in directions and angles are not enough, you can write the full gradient. But in v4, the dedicated utilities are preferred for common cases because they use the configured interpolation space (OKLab) and are shorter to write.
b. Radial and conic gradients
Radial gradients emanate from a center point. Conic gradients sweep around a center point. Both are native in Tailwind v4.
Radial gradients use bg-radial for the basic form and bg-radial-[<position>] for positioned variants.
<div class="bg-radial from-white to-zinc-900"></div>
<div class="bg-radial-[at_top_left] from-blue-500 to-transparent"></div>
<div class="bg-radial-[at_25%_25%] from-white to-zinc-900 to-75%"></div>The plain bg-radial centers the gradient at the element’s center. The arbitrary position syntax at_top_left or at_25%_25% moves the center. Shape and size keywords work too: bg-radial-[circle] forces a circular gradient, bg-radial-[ellipse_closest-side] combines shape and size.
Conic gradients use bg-conic for the basic form and bg-conic-{angle} for a starting angle.
<div class="bg-conic from-red-500 via-yellow-500 to-red-500"></div>
<div class="bg-conic-90 from-red-500 to-blue-500"></div>The bg-conic-90 starts the sweep at 90 degrees. The bg-conic class without an angle starts at the default position (usually the top).
A critical rule for conic gradients: you must include at least a from- and a to- color. A conic gradient with only one color collapses to a flat fill because there is nothing to sweep between. For a full-color-wheel effect, use multiple via- stops or the longer-hue interpolation mode:
<div class="bg-conic/[in_hsl_longer_hue] from-red-600 to-red-600"></div>The longer-hue mode walks the entire color wheel between two identical endpoints, producing a rainbow.
c. Color stops: from, via, and to
Color stops are the colors the gradient transitions between. Tailwind provides three stop positions: from-* (start), via-* (middle), and to-* (end). Each accepts any color from the theme: from-red-500, via-blue-400, to-transparent, from-current, and so on.
The basic two-color gradient uses from- and to-:
<div class="bg-linear-to-r from-cyan-500 to-blue-500"></div>Three-color gradients add via-:
<div class="bg-linear-to-r from-indigo-500 via-purple-500 to-pink-500"></div>The via- color sits at the midpoint by default. You can adjust this with stop position utilities: via-30% places the middle color at 30% of the gradient line. The from- and to- stops accept positions too: from-10%, to-90%.
<div class="bg-linear-to-r from-cyan-500 from-10% via-blue-500 via-50% to-indigo-500 to-90%"></div>The position utilities use percentage values. Arbitrary values are supported: from-[49%], to-[51%]. For multi-position values on via-, the syntax requires a type hint to disambiguate from a color: via-[length:49%_51%].
Stop positions are what make sharp color bands possible. A gradient from from-white from-[49%] to to-white to-[51%] with a via-red-400 in between creates a thin red stripe rather than a smooth blend.
The color stop utilities are the same across all three gradient types. A radial gradient uses from- and to- the same way a linear gradient does. A conic gradient can use multiple via- stops to create a color wheel.
Complete Example Session
<!-- ============================================ -->
<!-- PART 1: BASIC LINEAR GRADIENT -->
<!-- ============================================ -->
<div class="h-14 bg-linear-to-r from-cyan-500 to-blue-500"></div><!-- ============================================ -->
<!-- PART 2: LINEAR GRADIENT WITH ANGLE -->
<!-- ============================================ -->
<div class="h-14 bg-linear-45 from-indigo-500 to-pink-500"></div><!-- ============================================ -->
<!-- PART 3: THREE-COLOR GRADIENT -->
<!-- ============================================ -->
<div class="h-14 bg-linear-to-r from-indigo-500 via-purple-500 to-pink-500"></div><!-- ============================================ -->
<!-- PART 4: GRADIENT WITH STOP POSITIONS -->
<!-- ============================================ -->
<div class="h-14 bg-linear-to-r from-cyan-500 from-10% via-blue-500 via-50% to-indigo-500 to-90%"></div><!-- ============================================ -->
<!-- PART 5: RADIAL GRADIENT -->
<!-- ============================================ -->
<div class="h-14 bg-radial from-white to-zinc-900"></div><!-- ============================================ -->
<!-- PART 6: RADIAL GRADIENT WITH POSITION -->
<!-- ============================================ -->
<div class="h-14 bg-radial-[at_top_left] from-blue-500 to-transparent"></div><!-- ============================================ -->
<!-- PART 7: RADIAL WITH SHAPE AND SIZE -->
<!-- ============================================ -->
<div class="h-14 bg-radial-[circle_at_top] from-indigo-500 to-pink-500"></div><!-- ============================================ -->
<!-- PART 8: CONIC GRADIENT -->
<!-- ============================================ -->
<div class="h-14 bg-conic from-red-500 via-yellow-500 to-red-500"></div><!-- ============================================ -->
<!-- PART 9: CONIC GRADIENT WITH ANGLE -->
<!-- ============================================ -->
<div class="h-14 bg-conic-90 from-red-500 to-blue-500"></div><!-- ============================================ -->
<!-- PART 10: CONIC COLOR WHEEL -->
<!-- ============================================ -->
<div class="size-32 rounded-full bg-conic/[in_hsl_longer_hue] from-red-600 to-red-600"></div>The ten parts covered the essential gradient patterns: basic linear, angle-based linear, three-color, stop positions, radial, radial with position, radial with shape, conic, conic with angle, and a full color wheel.
Quick Reference
Linear Gradient Utilities (v4)
| Class | CSS |
|---|---|
bg-linear-to-t | linear-gradient(to top, ...) |
bg-linear-to-r | linear-gradient(to right, ...) |
bg-linear-to-b | linear-gradient(to bottom, ...) |
bg-linear-to-l | linear-gradient(to left, ...) |
bg-linear-45 | linear-gradient(45deg, ...) |
-bg-linear-45 | linear-gradient(-45deg, ...) |
bg-linear-[...] | arbitrary value |
Radial Gradient Utilities (v4)
| Class | CSS |
|---|---|
bg-radial | radial-gradient(in oklab, ...) |
bg-radial-[at_top] | positioned at top |
bg-radial-[at_25%_25%] | positioned by percentage |
bg-radial-[circle] | circular shape |
Conic Gradient Utilities (v4)
| Class | CSS |
|---|---|
bg-conic | conic-gradient(in oklab, ...) |
bg-conic-90 | starts at 90deg |
bg-conic-[...] | arbitrary value |
Color Stop Utilities
| Class | Purpose |
|---|---|
from-{color} | Starting color |
via-{color} | Middle color (optional) |
to-{color} | Ending color |
from-{position} | Starting position (e.g., from-10%) |
via-{position} | Middle position |
to-{position} | Ending position |
Version Migration
| v3 Class | v4 Class |
|---|---|
bg-gradient-to-r | bg-linear-to-r |
bg-gradient-to-br | bg-linear-to-br |
| (no native radial) | bg-radial |
| (no native conic) | bg-conic |
Best Practices
✅ Do This:
<!-- Use v4 names in v4 projects -->
<div class="bg-linear-to-r from-cyan-500 to-blue-500"></div> <!-- ✅ -->
<!-- Include from- and to- for conic gradients -->
<div class="bg-conic from-red-500 to-blue-500"></div> <!-- ✅ -->
<!-- Use stop positions for precise control -->
<div class="from-10% via-50% to-90%"></div> <!-- ✅ -->
<!-- Use arbitrary values for one-off positions -->
<div class="bg-radial-[at_25%_75%]"></div> <!-- ✅ -->
<!-- Use longer-hue for color wheels -->
<div class="bg-conic/[in_hsl_longer_hue]"></div> <!-- ✅ -->❌ Don’t Do This:
<!-- Don't use bg-gradient-to-* in v4 (deprecated) -->
<div class="bg-gradient-to-r"></div> <!-- ❌ -->
<!-- Don't use conic with only one color stop -->
<div class="bg-conic from-red-500"></div> <!-- ❌ (collapses) -->
<!-- Don't forget the gradient function class -->
<div class="from-red-500 to-blue-500"></div> <!-- ❌ (no gradient) -->
<!-- Don't use v3 radial arbitrary syntax when v4 native works -->
<div class="bg-[radial-gradient(circle,red,blue)]"></div> <!-- ⚠️ v3 style -->Common Pitfalls
| Pitfall | Why It Happens | Fix |
|---|---|---|
| No gradient appears | Missing bg-linear-* or bg-radial | Add the gradient function class |
| Gradient is flat color | Only one color stop | Add from- and to- |
| Conic is flat | Missing to- color | Add both stops |
| Old class names fail | v3 syntax in v4 project | Use bg-linear-* |
| Colors look different | OKLab interpolation vs sRGB | Adjust colors or use arbitrary mode |
| Stop positions ignored | Wrong syntax on via- | Use via-[length:...] for multi-position |
Real-World Examples
1. Hero Section Gradient
<div class="bg-linear-to-br from-slate-900 via-purple-900 to-slate-900"></div>2. Button Gradient
<button class="bg-linear-to-r from-blue-500 to-indigo-600 text-white">3. Card with Subtle Gradient
<div class="bg-linear-to-b from-white to-gray-100"></div>4. Spotlight Effect
<div class="bg-radial-[at_top_center] from-white to-transparent"></div>5. Avatar Ring
<div class="size-16 rounded-full bg-conic from-pink-500 via-yellow-500 to-pink-500">6. Loading Spinner Background
<div class="size-12 rounded-full bg-conic-0 from-blue-500 to-blue-500"></div>7. Progress Ring
<div class="size-24 rounded-full bg-conic from-green-500 to-green-500 to-75%"></div>8. Text Gradient
<h1 class="bg-linear-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent">9. Border Gradient
<div class="bg-linear-to-r from-cyan-500 to-blue-500 p-0.5 rounded-lg">
<div class="bg-white rounded-lg">Content</div>
</div>10. Dark Mode Gradient
<div class="bg-linear-to-b from-gray-900 to-gray-800 dark:from-gray-800 dark:to-gray-900">Visual
Gradient Composition Model
┌─────────────────────────────────────────────────────────────┐
│ TAILWIND GRADIENT ARCHITECTURE │
│ │
│ ┌─────────────────┐ ┌─────────────────┐ │
│ │ GRADIENT TYPE │ │ COLOR STOPS │ │
│ │ │ │ │ │
│ │ bg-linear-* │ │ from-{color} │ │
│ │ bg-radial │ │ via-{color} │ │
│ │ bg-conic │ │ to-{color} │ │
│ └────────┬────────┘ └────────┬────────┘ │
│ │ │ │
│ └───────────┬───────────┘ │
│ ▼ │
│ ┌───────────────────────┐ │
│ │ CSS GRADIENT IMAGE │ │
│ │ │ │
│ │ linear-gradient( │ │
│ │ to right, │ │
│ │ var(--tw-from), │ │
│ │ var(--tw-to) │ │
│ │ ) │ │
│ └───────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘Linear Gradient Directions
┌─────────────────────────────────────────────────────────────┐
│ DIRECTION UTILITIES │
│ │
│ bg-linear-to-t ──▶ toward top (0deg) │
│ bg-linear-to-tr ──▶ toward top-right (45deg) │
│ bg-linear-to-r ──▶ toward right (90deg) │
│ bg-linear-to-br ──▶ toward bottom-right (135deg) │
│ bg-linear-to-b ──▶ toward bottom (180deg) │
│ bg-linear-to-bl ──▶ toward bottom-left (225deg) │
│ bg-linear-to-l ──▶ toward left (270deg) │
│ bg-linear-to-tl ──▶ toward top-left (315deg) │
│ │
│ Angle form: bg-linear-45 = 45deg from top │
│ │
└─────────────────────────────────────────────────────────────┘Color Stop Positions
┌─────────────────────────────────────────────────────────────┐
│ STOP POSITIONS │
│ │
│ from-10% via-50% to-90% │
│ │ │ │ │
│ ▼ ▼ ▼ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │░░░░░░░░░██████████████████████████████████████░░░░░░│ │
│ │ cyan blue indigo indigo │ │
│ │ 10% 50% 90% │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ Classes: from-cyan-500 from-10% │
│ via-blue-500 via-50% │
│ to-indigo-500 to-90% │
│ │
└─────────────────────────────────────────────────────────────┘Conic Gradient Color Wheel
┌─────────────────────────────────────────────────────────────┐
│ CONIC GRADIENT WITH MULTIPLE STOPS │
│ │
│ ┌─────────────────┐ │
│ │ RED │ │
│ │ (from-red) │ │
│ │ │ │
│ ┌─────┼─────┐ │ │
│ │ │ │ │ │
│ │ │ │ YELLOW │ │
│ │ │ │ (via) │ │
│ │ │ │ │ │
│ │ │ │ GREEN │ │
│ │ │ │ (via) │ │
│ │ │ │ │ │
│ │ │ │ BLUE │ │
│ │ │ │ (via) │ │
│ └─────┼─────┘ │ │
│ │ │ │
│ │ RED │ │
│ │ (to-red) │ │
│ └─────────────────┘ │
│ │
│ bg-conic from-red-500 via-yellow-500 via-green-500 │
│ via-blue-500 to-red-500 │
│ │
└─────────────────────────────────────────────────────────────┘Summary
| Item | Value |
|---|---|
| Linear direction | bg-linear-to-{t,tr,r,br,b,bl,l,tl} |
| Linear angle | bg-linear-{deg} (v4) |
| Radial | bg-radial + position in brackets |
| Conic | bg-conic + optional angle |
| Start color | from-{color} |
| Middle color | via-{color} |
| End color | to-{color} |
| Start position | from-{percent} |
| Middle position | via-{percent} |
| End position | to-{percent} |
| v3 linear name | bg-gradient-to-r |
| v4 linear name | bg-linear-to-r |
| Interpolation | OKLab by default in v4 |
Key takeaways:
- Tailwind gradients are composed of two parts. The gradient function class (
bg-linear-*,bg-radial, orbg-conic) sets the shape and direction. The color stop classes (from-*,via-*,to-*) set the colors. Both are required. - Tailwind v4 renamed linear gradient utilities.
bg-gradient-to-rbecamebg-linear-to-r. The old names may still work but are deprecated. New projects should use the v4 names. - Radial and conic gradients are native in v4. No plugin is needed.
bg-radialandbg-coniccreate the gradient functions; the same color stop utilities apply. - Conic gradients need at least two color stops. A conic gradient with only
from-collapses to a flat fill. Always includeto-, and usevia-stops for multi-color sweeps. - Stop positions allow precise control.
from-10%,via-50%, andto-90%place colors at specific points along the gradient line. This is useful for sharp bands, hard stops, and custom distributions. - OKLab interpolation is the v4 default. Gradients blend in a perceptually uniform color space, producing smoother transitions than sRGB. The arbitrary value syntax lets you override this when you need a specific interpolation mode.
- Arbitrary values are the escape hatch. When the built-in utilities do not cover your case,
bg-linear-[...],bg-radial-[...], andbg-conic-[...]accept any valid CSS gradient syntax. - Color stops use the same palette as other utilities.
from-red-500pulls from the same theme asbg-red-500. This keeps colors consistent across the project without duplication.
Remember: Gradients in Tailwind are built from composable utilities, not monolithic declarations. The gradient function sets the geometry; the color stops fill it in. This separation makes it easy to change direction without touching colors, or change colors without touching direction. The v4 migration introduced native radial and conic support and changed the linear gradient names. If you are working in v4, use bg-linear-*; if you are maintaining a v3 project, bg-gradient-to-* still works. The underlying CSS gradient functions are the same; Tailwind just exposes them in a more composable form.
Stop using slow, ad-bloated tool sites! 🤮
🔎 Search “KandZ Tools” on Google to use many professional utilities for free.
KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)
⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free
🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!