Shadow & Elevation Scale Builder

Why Elevation Systems Matter

Shadows communicate depth – they tell users which elements are above others, what can be interacted with, and what demands immediate attention. A tooltip should feel closer than the card beneath it. A modal should feel like it's floating above everything else on the screen. When shadow values are chosen ad hoc rather than from a consistent scale, the result is a UI that feels visually incoherent even when each individual decision seemed reasonable in isolation. A defined elevation scale is one of the quickest wins for making a product feel polished and intentionally designed.

The five-level system here maps directly to real UI patterns: flat for subtle background elements, raised for everyday content cards, floating for overlays like dropdowns, overlay for sidebars and sticky headers, and modal for dialogs that demand full attention. Beyond the five Tailwind-inspired presets, the "border-only" style is a deliberate choice for flat design systems – products like Notion and Linear that use hairline borders instead of shadows to communicate hierarchy. Whatever shadow style matches your product's character, the export formats give you production-ready values for CSS, Tailwind config, Figma, and W3C design tokens.