shadow depth elevation box-shadow utility card crisp floating directional card with directional perspective lift modal or overlay with strong diffuse shadow hard-offset card for editorial or retro layout soft floating elevation for dropdowns and tooltips Tailwind shadows are size-based, not style-based hard-offset crisp shadows impossible with Tailwind utilities dark mode shadow intensity needs semantic control
Shadow Depth
Fetch snippet JSON:
curl https://webspire.de/snippets/decorative/shadow-depth.json Preview
Background
Customize
Quick Start
<div class="shadow-crisp rounded-xl p-6 bg-white">...</div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-color-scheme
- Size
- 828 bytes · 34 lines
- Custom Properties
-
--shadow-natural-color--shadow-floating-color--shadow-strong-color--shadow-crisp-color - Classes
-
.shadow-natural.shadow-floating.shadow-strong.shadow-crisp
shadow depth elevation box-shadow utility card crisp floating directional
Four shadow styles with distinct visual intent — apply the class that matches the elevation and character of the element:
| Class | Style | Best for |
|---|---|---|
| .shadow-natural | 6px diagonal offset, soft | Cards with directional perspective |
| .shadow-floating | Pure vertical, diffuse | Dropdowns, tooltips, hover states |
| .shadow-strong | Deep vertical, spread | Modals, focused sections |
| .shadow-crisp | Hard 4px offset, no blur | Editorial, retro, high-contrast |
All shadow colors use OKLCH for precise opacity control and adapt automatically to dark mode via @media (prefers-color-scheme: dark).
Override any shadow color via its custom property, e.g.:
.my-card {
--shadow-crisp-color: oklch(30% 0.15 260 / 0.25);
}