How to Use Gradients in Tailwind CSS v4

Tailwind CSS v4 simplifies gradient creation. This guide focuses on practical examples for linear, radial, and conic gradients using Tailwind’s background-image utilities.

Linear gradients: Directional flow

Linear gradients transition colors along a straight line. Tailwind v4 uses bg-linear-to-* for direction and from-*, via-*, to-* for colors.

Example: Left to right, blue to pink

<div class="bg-linear-to-r from-blue-500 to-pink-500 w-full h-32">
  <!-- Content -->
</div>

Example: Top to bottom, purple to yellow with stop positions

<div class="bg-linear-to-b from-purple-400 from-20% to-yellow-300 to-80% w-full h-32">
  <!-- Content -->
</div>

Radial gradients: Expanding from a point

Radial gradients expand outwards from a central point. Tailwind v4 uses bg-radial with optional position modifiers.

Example: Centered, pink to fuchsia

<div class="size-48 rounded-full bg-radial-[at_50%_50%] from-pink-400 to-fuchsia-700 flex items-center justify-center text-white">
  Radial
</div>

Example: Top-left origin, white to black

<div class="size-48 rounded-full bg-radial-[at_0%_0%] from-white to-black flex items-center justify-center text-white">
  Radial Top-Left
</div>

Conic gradients: Angular sweep

Conic gradients sweep around a central point. Tailwind v4 uses bg-conic with optional angle modifiers.

Example: Full sweep, blue to sky blue

<div class="size-48 rounded-full bg-conic from-blue-600 to-sky-400 flex items-center justify-center text-white">
  Conic
</div>

Example: 180-degree start, multi-color

<div class="size-48 rounded-full bg-conic-180 from-red-500 via-green-500 to-blue-500 flex items-center justify-center text-white">
  Conic 180
</div>

Advanced control: Interpolation and custom values

Tailwind v4 offers control over color blending with interpolation modifiers like /oklab.

Example: Linear gradient with Oklab interpolation

<div class="bg-linear-to-r/oklab from-indigo-500 to-teal-400 w-full h-32">
  Oklab Interpolation
</div>

For highly specific gradients, use custom values directly:

<div class="bg-linear-[25deg,red_5%,yellow_60%,lime_90%,teal] w-full h-32">
  Custom Gradient
</div>

Conclusion

Tailwind CSS v4’s background-image utilities provide a powerful and concise way to implement diverse gradients. Experiment with these examples to enhance your web designs with dynamic visual effects.

/Michael Andreuzza