Realistic Card Shadows Without Over-Blur

Most flat-looking UIs fail because shadows are too strong or too blurry. A realistic card shadow is usually a stack of subtle layers.

Common mistake

One large shadow with high blur creates fog around the element. It reduces contrast and makes layout feel soft in a bad way.

Better approach

Use 2-3 shadows with different distance and opacity:

• Tight base shadow for contact
• Mid shadow for depth
• Soft ambient shadow for atmosphere

Color-aware shadows

Pure black shadows are rarely ideal. Slightly tint shadows based on your background hue for more natural results.

Interaction state

On hover, change vertical offset and opacity, not only blur radius. The card should feel lifted, not glowing.

Team standard

Define shadow tokens for:

• Surface 1
• Surface 2
• Floating action
• Modal

This keeps hierarchy stable across pages.