Crafting natural, tactile shadows is fundamental to modern UI design. Instead of harsh single-layer drop shadows, professional design systems (such as Apple macOS, Stripe, and Linear) layer multiple subtle shadows with varied blur radii and opacities to simulate ambient bounce light and directional light sources simultaneously.
Key Property Parameters & Syntax
| Parameter | Type / Unit | Description |
|---|---|---|
| offset-x | px | rem (Signed) | Horizontal distance. Positive values cast shadow to the right; negative values cast to the left. |
| offset-y | px | rem (Signed) | Vertical distance. Positive values cast shadow downwards (standard light source from above); negative values cast upwards. |
| blur-radius | px | rem (>= 0) | Softness of the shadow edge. Higher values create diffused ambient spread; 0px produces a razor-sharp outline. |
| spread-radius | px | rem (Signed) | Expands or contracts the shadow footprint before blur is applied. Positive values grow the shadow; negative values shrink it. |
| color | rgba() | hex | hsla() | Shadow color. Prefer low-opacity dark tones like rgba(0, 0, 0, 0.08) rather than pure solid black for realistic lighting. |
| inset | Keyword (Optional) | Inverts the shadow to draw inside the element frame, ideal for pressed buttons, sunken inputs, and neumorphic wells. |
Production Ready Code Snippets
1. Smooth Apple / Linear Multi-Layer Elevation Card
.elevated-card {
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.04),
0 4px 12px rgba(0, 0, 0, 0.06),
0 16px 36px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
}Three stacked layers simulating direct key light, secondary fill light, and ambient room bounce.
2. Inner Sunken Input Well (Pressed State)
.sunken-input {
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, 0.12),
0 1px 0 rgba(255, 255, 255, 0.05);
background: rgba(0, 0, 0, 0.2);
}Creates a deep inset depression with a subtle bottom rim highlight.
Frequently Asked Questions (FAQ)
How does blur radius differ from spread radius in CSS box-shadow?
Spread radius physically expands or shrinks the shadow bounding box before any blurring occurs. Blur radius determines the gaussian diffusion feathering applied to that edge. Combining a positive Y offset with a negative spread radius produces a soft, elevated floating card effect without dark muddy edges.
How do I create multi-layer realistic shadows in CSS?
Separate individual shadow definitions with commas in the box-shadow property. Layer 1 should be a close, crisp contact shadow with small blur (e.g., 0 1px 2px rgba(0,0,0,0.06)), while Layer 2 should be a broad, diffuse ambient shadow with large blur and vertical offset (e.g., 0 8px 24px rgba(0,0,0,0.08)).
What is an inset box shadow and when should I use it?
The inset keyword draws the shadow within the padding box of the element rather than outside. It is ideal for pressed button states, sunken search input fields, inner border highlights, and card bevels.
Does CSS box-shadow affect layout or trigger reflows?
No. The box-shadow property does not occupy document flow space and does not affect the layout of neighboring elements. However, complex multi-layer shadows on scrollable elements can trigger paint cycles, so hardware-accelerated composite layers (using will-change or transform) are recommended for active animations.