Box Shadow & Text Shadow

Apply elevation with the shadow scale and colored shadows, plus v4's new text-shadow utilities.

4 min read Level 1/5 #tailwind#effects

What you'll learn

Use the shadow-sm to shadow-2xl scale and shadow-none
Tint shadows with a shadow color
Use text-shadow utilities new in v4

Shadow communicates elevation — how far an element floats above the page. Used sparingly it builds hierarchy; overused it makes everything look noisy.

The Shadow Scale

<div class="shadow-sm">Barely lifted (subtle cards)</div>
<div class="shadow-md hover:shadow-lg transition-shadow">Interactive card</div>
<div class="shadow-2xl">A modal floating well above the page</div>
<div class="shadow-none">Flattened</div>

Pairing hover:shadow-lg with transition-shadow is a classic, cheap way to make a card feel pressable.

Colored Shadows

Tint a shadow to suggest a glow or brand accent:

<button class="bg-blue-600 shadow-lg shadow-blue-500/40">Glowing CTA</button>

v4 also adds inset shadows for inner depth:

<input class="inset-shadow-sm border border-gray-200" />

Text Shadow (new in v4)

v4 introduces a text-shadow-* scale, useful for legible text over busy images:

<h1 class="text-white text-5xl font-bold text-shadow-sm">
  Readable over a photo
</h1>

Opacity & Blend Modes →