Shadows

Box shadow presets and usage guidelines for native-feeling depth.

Shadow Presets

Subtle Layered

A smooth, multi-layered shadow that creates realistic depth.

Soft Elevation

Perfect for cards with gentle lift effect.

Apple-style

Inspired by macOS window shadows.

Material Design

Google's Material Design 3 elevation.

Dreamy

Very soft, diffused shadow for a dreamy effect.

Sharp

Crisp, defined shadow for high contrast.

Hover Card

Perfect for cards that lift on hover.

Button Pressed

Inset shadow for pressed states.

Floating Modal

For modals and dialogs that float above content.

Dropdown Menu

For dropdown menus and popovers.

Framer

Subtle layered shadow with blue-tinted inset border, used by Framer.

Tailwind Shadows

Native Tailwind shadow utilities for quick use.

Best Practices

1. Layer multiple shadows - Single shadows look flat. Use 3-6 layers for realistic depth.
2. Decrease opacity - Use low alpha values (2-8%) per layer.
3. Exponential spread - Double the blur radius and offset for each layer.
4. Negative spread - Use negative spread values to keep shadows tight.
5. Subtle border - Add a 1px spread shadow for crisp edges.
6. Dark mode - Reduce intensity or use solid borders instead.