CSS Shadows Reference
Compare CSS box shadows, text shadows, and drop shadows and choose the effect that matches the rendered shape.
Updated 2026-08-07
Choose a shadow type
| Feature | Applies to | Spread | Inset | Follows alpha shape |
|---|---|---|---|---|
| box-shadow | Element border box | Yes | Yes | No |
| text-shadow | Text glyphs and decorations | No | No | Yes |
| filter: drop-shadow() | Rendered image or element alpha | No | No | Yes |
Examples
- Tool.io
Soft elevation
A positive vertical offset and broad blur create a conventional elevated card.
CSSbox-shadow: 0 8px 24px rgb(15 23 42 / 16%); - Tool.io
Hard shadow
A zero blur radius produces a crisp, graphic offset shadow.
CSSbox-shadow: 6px 6px 0 rebeccapurple; - Tool.io
Layered elevation
Layer a tight contact shadow with a larger ambient shadow for more natural depth.
CSSbox-shadow: 0 1px 2px rgb(0 0 0 / 12%), 0 12px 32px rgb(0 0 0 / 18%); - Tool.io
Inset shadow
The inset keyword paints inside the border box to create a recessed surface.
CSSbox-shadow: inset 0 3px 8px rgb(15 23 42 / 35%); - Tool.io
Inner glow
A centered inset shadow with a bright color creates an inner glow.
CSSbox-shadow: inset 0 0 18px rgb(59 130 246 / 55%); - Tool.io
Spread ring
A zero-offset shadow with spread can supplement an accessible outline or focus indicator.
CSSbox-shadow: 0 0 0 4px rgb(59 130 246 / 45%); - Tool.io
Colored shadow
Colored shadows can echo a component accent while retaining visible depth.
CSSbox-shadow: 0 12px 24px rgb(102 51 153 / 45%); - Tool.io
Outer glow
Zero offsets, a large blur, and positive spread radiate evenly around the element.
CSSbox-shadow: 0 0 24px 6px rgb(236 72 153 / 55%); - Readable text
Text shadow
Text shadow follows glyph shapes; keep it restrained so letterforms remain legible.
CSStext-shadow: 0 2px 4px rgb(0 0 0 / 45%); - Layered text
Layered text shadow
Multiple comma-separated text shadows are painted front to back.
CSStext-shadow: 1px 1px #ec4899, 2px 2px #8b5cf6, 3px 3px #2563eb; Alpha-aware drop shadow
drop-shadow() follows the rendered alpha silhouette instead of the rectangular border box.
CSSfilter: drop-shadow(0 10px 8px rgb(0 0 0 / 35%));Layered drop shadows
Multiple drop-shadow() filter functions can build layered shadows around a silhouette.
CSSfilter: drop-shadow(4px 4px 0 #ec4899) drop-shadow(4px 4px 0 #2563eb);
Use box-shadow for a rectangular component frame, text-shadow for glyphs, and drop-shadow() when a transparent image or irregular rendered shape should cast the shadow.