Never use pure grey or pure black shadows
Real-world shadows are never pure grey (box-shadow: 0 4px 8px #888). They are dark but slightly warm or cool, and semi-transparent. The professional formula: rgba(0, 0, 0, 0.12) for subtle ambient shadows, rgba(0, 0, 0, 0.24) for more prominent cast shadows. The low alpha value allows the background colour to show through, making the shadow look natural on any background colour.
Match shadow direction consistently across your UI
Shadows imply a light source position. If cards have shadows below them (positive offset-y) and buttons have shadows above them (negative offset-y), the UI looks incoherent — the light source appears to be in two places at once. Choose one light direction (top-left is most conventional, implying a light source above-left) and apply it consistently across every shadow in your design.
Dark mode requires different shadow strategies
Dark shadows are invisible on dark backgrounds. In dark mode, you have two options: reduce shadow opacity and increase blur so the subtle shadow reads even against dark backgrounds, or replace drop shadows entirely with a subtle border (1px solid rgba(255,255,255,0.1)) for elevation. Many mature design systems (Linear, Vercel, Radix) use borders rather than shadows for dark mode elevation.
Use the two-shadow technique for realistic depth
Google Material Design's elevation shadows use two layered shadows: one small, dark, tightly offset shadow (the key shadow, simulating direct light) and one larger, softer, lower-opacity shadow (the ambient shadow, simulating scattered light). Example for a card: box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24). This looks dramatically more realistic than a single shadow.
Performance: prefer box-shadow over filter: drop-shadow for rectangular elements
box-shadow is GPU-accelerated in modern browsers and very cheap to render. filter: drop-shadow() respects the element's alpha channel (follows irregular shapes) but is more expensive. For standard rectangular cards, buttons, and containers, always use box-shadow. Only reach for filter: drop-shadow when you need the shadow to follow a non-rectangular shape like a PNG with transparency.