Shadows

A shadow adds visual depth — implying elevation, focus, or separation.

box-shadow — The Standard

box-shadow: 0 4px 12px rgb(0 0 0 / 10%);

Five values: x-offset y-offset blur spread color.

• x / y offset — how far the shadow shifts. Positive y = below.
• blur — softness. Higher = softer.
• spread — expand the shadow before blurring. Often 0.
• color — usually a translucent black or the brand color.

Layered Shadows

Stack several for realism:

box-shadow:
  0 1px 2px rgb(0 0 0 / 6%),
  0 4px 12px rgb(0 0 0 / 8%),
  0 8px 24px rgb(0 0 0 / 6%);

Real shadows aren’t one blur — they’re a stack.

Inset Shadows

inset flips the shadow inward:

.pressed {
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 20%);
}

A “pressed in” effect — buttons, input wells, etc.

Colored Glow

For brand glow or focus rings:

.brand-focus:focus {
  box-shadow: 0 0 0 4px rgb(99 96 255 / 30%);
}

A “ring” that wraps the element without affecting layout (like outline, but with finer control).

text-shadow

Same idea, applied to text. No spread, no inset:

.legible-over-photo {
  color: white;
  text-shadow: 0 1px 2px rgb(0 0 0 / 50%);
}

Useful for text over photos.

Don’t Overdo It

Heavy shadows look dated. Modern UI tends toward subtle elevation — very small offset, soft blur, low opacity. Save dramatic shadows for genuine “floating” elements like modals and popovers.

Up Next

Moving and rotating elements with transform.