Skip to main content

​
Overview

drop-shadow() is part of the CSS filter property, not box-shadow, and the framework ships a bundled drop-shadow scale for alpha-aware shadows on logos, SVGs, and transparent artwork. If you need a standard surface shadow on cards, panels, or buttons, use box-shadow instead. Use filter-based drop shadow when the shadow should follow the visible shape of an image or SVG.
ClassFilter (CSS)Usage
.drop-shadow-smfilter: drop-shadow(0 1px 2px rgba(0, 0, 0, 1));Light alpha-aware shadow (matches preview scale)
.drop-shadowfilter: drop-shadow(0 4px 6px rgba(0, 0, 0, 1));Default drop shadow
.drop-shadow-mdfilter: drop-shadow(0 8px 12px rgba(0, 0, 0, 1));Medium emphasis on logos and artwork
.drop-shadow-lgfilter: drop-shadow(0 14px 24px rgba(0, 0, 0, 1));Strong shadow for hero or large transparent graphics

​
Example

​
Markup

<div class="drop-shadow-md" style="width: 7rem; aspect-ratio: 1.1547 / 1; background: var(--demo-light-card); border: 1px solid var(--demo-light-border); clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);">
</div>

​
When to Use Drop Shadow vs Box Shadow

Use caseBetter choiceWhy
Card, panel, button, modalbox-shadowWorks naturally on rectangular surfaces and is importer-supported
PNG, SVG, transparent artworkdrop-shadow()Follows the visible alpha edges instead of the box bounds

​
Best Practices

  • Use box-shadow for most UI surfaces.
  • Use drop-shadow() only when the image shape matters.
  • Keep drop shadows subtle on logos and icons.
  • Keep the strongest levels for hero artwork or large transparent illustrations.

Box Shadow

Use importer-supported custom box-shadow utilities for standard surfaces

Blur

Soften the media before or after applying alpha-aware shadow

Contrast

Tighten the image while preserving the alpha-aware shadow

Color Effects

Reset or stack additional color filter helpers