box-shadow

Definition

The box-shadow property in CSS is used to add shadow effects around an element’s frame. It can be used to create multiple effects, like depth or emphasis. The box-shadow property can take several values: horizontal offset, vertical offset, optional blur radius, optional spread radius, and color.

Syntax

.card {
  box-shadow: 0 10px 30px -15px rgba(15, 23, 42, 0.4);
}

Values

offset-x offset-y blur spread color: primary shadow signature.
inset: draw the shadow inside the element.
Multiple shadows separated by commas.

Practical Examples

.card {
  box-shadow: 0 12px 24px -12px rgba(15, 23, 42, 0.35);
}

.card:is(:hover, :focus-within) {
  box-shadow: 0 18px 40px -20px rgba(14, 165, 233, 0.45);
}

Layer subtle default shadows with stronger interactive states for depth cues.

HTML

Soft shadow

Resting elevation

Hover state

Call-to-action focus

Code

<div class="grid gap-4 sm:grid-cols-2">
  <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Soft shadow</p>
    <div class="rounded-lg border border-slate-100 p-6 text-sm text-slate-700" style="box-shadow: 0 10px 30px -15px rgba(15,23,42,0.35);">Resting elevation</div>
  </div>
  <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Hover state</p>
    <div class="rounded-lg border border-slate-100 p-6 text-sm text-slate-700 transition" style="box-shadow: 0 22px 45px -20px rgba(14,165,233,0.55);">Call-to-action focus</div>
  </div>
</div>

Tips & Best Practices

Use multiple shadows to simulate ambient vs. directional lighting.
Consider prefers-reduced-motion users by keeping hover shadows subtle.
Pair with outline-offset for accessible focus styles that complement elevation.

Accessibility & UX Notes

Ensure elevated elements retain sufficient contrast with backgrounds; rely on more than shadow for focus indication.

Browser Support

Supported in all modern browsers including IE9+.

filter: drop-shadow() for SVG and non-rectangular shapes.
outline / focus-visible for accessibility cues.
transform to add motion during elevation changes.