Gradients and Shadows in Depth

Building Rich Visual Depth

Tailwind ships gradient and shadow utilities that cover the vast majority of real design needs. Used together, they let you create polished UIs without touching a line of custom CSS.

Gradient Backgrounds

Gradient utilities combine a direction class with from-*, via-*, and to-* color stops. All three layers accept the full Tailwind color palette and the /opacity modifier.

• bg-gradient-to-r — left to right.
• bg-gradient-to-br — top-left to bottom-right (diagonal).
• bg-gradient-to-b — top to bottom.
• from-violet-600 via-purple-500 to-pink-500 — three-stop gradient.
• from-sky-400/0 to-sky-400 — fade-in effect using opacity stop.

<div class="h-40 rounded-2xl bg-gradient-to-br from-violet-600 via-purple-500 to-pink-500">
  Gradient background
</div>

<!-- Gradient text -->
<h1 class="bg-gradient-to-r from-sky-400 to-indigo-400 bg-clip-text text-transparent text-5xl font-black">
  Gradient Text
</h1>

Colored and Layered Shadows

In Tailwind v4, shadow color is set with shadow-{color}/{opacity}. You can stack a colored shadow-* with any size variant, and even layer an inset shadow using inset-shadow-*.

<div class="rounded-xl bg-white p-6
            shadow-xl shadow-violet-500/30
            ring-1 ring-violet-200">
  Card with a tinted glow shadow
</div>