box-shadow syntax explained
The box-shadow property accepts up to six values. Understanding each one lets you craft exactly the shadow you want:
box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;
/* Example */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);| Parameter | What it does | Tip |
|---|---|---|
inset | Makes shadow inside the element | Use for pressed/sunken effect |
offset-x | Horizontal distance | Negative = left |
offset-y | Vertical distance | Negative = up |
blur-radius | How blurry/soft the shadow is | 0 = sharp edge |
spread-radius | Expand or contract shadow size | Negative shrinks |
color | Shadow color | Use rgba for transparency |
The five box-shadow parameters
- x-offset — horizontal distance. Positive = right.
- y-offset — vertical distance. Positive = down.
- blur-radius — how soft the shadow fades. 0 = crisp edge.
- spread-radius — grows (positive) or shrinks (negative) the shadow before blurring.
- color — any CSS color, typically with alpha (rgba, or hex +
00-ff). Use the color picker to find the right shadow color.
An optional inset keyword flips the shadow inward, simulating an inner glow or recessed effect.
Realistic shadows: use multiple layers
Real depth comes from stacking 2-4 subtle shadows rather than one big one. Try:
- Sharp shadow: 0 1px 2px rgba(0,0,0,.2)
- Soft shadow: 0 10px 30px rgba(0,0,0,.15)
- Stack them:
0 1px 2px rgba(0,0,0,.2), 0 10px 30px rgba(0,0,0,.15)
Multi-layer box shadow recipes
Copy any of these directly into your CSS or use them as starting points in the generator above:
/* Subtle card lift (Google Material style) */
box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
/* Hard shadow (flat design) */
box-shadow: 4px 4px 0 #000;
/* Colored glow */
box-shadow: 0 0 20px rgba(99, 102, 241, 0.6);
/* Inner sunken effect */
box-shadow: inset 0 2px 4px rgba(0,0,0,.2);
/* Elevation system (3 levels) */
--shadow-sm: 0 1px 2px rgba(0,0,0,.05);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);The elevation system approach — defining shadow tokens at three levels — is particularly useful in design systems where you want consistent depth cues across components.
box-shadow vs drop-shadow() filter
These two CSS features look similar but behave very differently:
box-shadowfollows the element's box model. It applies to the rectangular bounding box of the element and ignores any transparent areas inside it. Use this for cards, buttons, and divs.filter: drop-shadow()follows the actual visible shape of the element. It respects transparency, so it works correctly on PNG cutouts, SVGs, and irregularly shaped images.
Rule of thumb: for cards and divs, use box-shadow. For icons and images with transparent backgrounds, use filter: drop-shadow().
Frequently asked questions
Why is my box-shadow being clipped?
A parent element with overflow: hidden will clip any shadow that extends beyond its bounds. Remove overflow: hidden from the parent, or switch to filter: drop-shadow() which is not affected by overflow clipping. This is one of the most common box-shadow debugging issues.
Does box-shadow affect layout?
No. Shadows are purely visual and do not take up space in the layout — they don't affect the size or position of other elements. If you need a visible border that does affect layout, use border. If you need a layout-aware outline that doesn't shift surrounding elements, use outline with outline-offset.
How do I animate a box-shadow on hover?
Declare the shadow on both the base state and the hover state, then add transition: box-shadow 0.2s ease to the base element. The browser will interpolate between the two values smoothly:
.card {
box-shadow: 0 1px 3px rgba(0,0,0,.12);
transition: box-shadow 0.2s ease;
}
.card:hover {
box-shadow: 0 8px 20px rgba(0,0,0,.2);
}Avoid animating other properties alongside box-shadow if performance is a concern — shadow transitions can be GPU-intensive on complex pages.
Designing with shadow: best practices
Shadows communicate depth and elevation. Using them well means following a few conventions that keep interfaces looking professional rather than dated:
Use low opacity, not dark colors
Shadows built with rgba(0, 0, 0, 0.1) or similar low-opacity black values look natural on any background color. Using a fully opaque gray like #999 creates muddy-looking shadows that clash on non-white backgrounds. Keep opacity between 0.05 and 0.25 for realistic results. Pick the right hue using the color picker.
Match shadow direction consistently
In real life, light comes from above. Shadows should point downward — meaning your offset-y is positive. Mixing upward and downward shadows on the same page creates visual confusion. Pick one light source direction and stick to it across all components.
Scale shadow with elevation
Elements at different visual heights should cast different shadows. A floating action button sits higher than a card, which sits higher than a flat list item. Larger blur-radius and offset-y values signal higher elevation. Define a small set of shadow tokens (sm, md, lg) and apply them consistently to maintain a coherent depth hierarchy.
Don't stack too many shadows
Two to three layers is usually the sweet spot for realistic multi-layer shadows. Beyond that, the effect rarely adds perceptible depth and increases rendering cost. The most convincing material-style shadows use one close, sharp layer (low blur, low offset) and one diffuse, distant layer (high blur, higher offset).
box-shadow and accessibility
Shadows are a visual-only cue and do not communicate meaning to screen readers. Never use shadow alone to indicate state changes such as focus or selection — always pair it with a color change, border, or outline. For keyboard focus indicators in particular, outline is more reliable than box-shadow because some high-contrast modes in operating systems suppress shadow rendering but preserve outlines.
Related tools
- Color Picker — Pick colors, convert hex/RGB/HSL/OKLCH, and check WCAG contrast.
- Favicon Generator — Generate favicon package from any image or emoji. Multiple sizes (16, 32, 48, 180, 192, 512), manifest.json, and HTML snippet.
- Flexbox Generator — Visual CSS Flexbox playground. Live preview + copyable CSS. Control direction, wrap, justify, align, gap. Example child layouts.
- CSS Grid Generator — Visual CSS Grid layout builder. Configure columns, rows, gaps, and named areas. Live preview with copyable CSS output.
Related articles
- 4 min readCSS Box Shadow Performance — GPU Compositing and Repaint OptimizationBox shadows can hurt scroll and animation performance if used incorrectly. Learn which shadow properties trigger repaints, how to move shadows to the compositor layer, and...
- 4 min readMultiple Box Shadows in CSS — Layer Shadows for Depth EffectsLayer multiple box-shadow values to create realistic depth, glow effects, and material design elevation. Learn CSS box-shadow syntax, neumorphism, neon glow, and performance tips.
- 4 min readAnimating CSS Box Shadows — Smooth Hover Effects and TransitionsCSS box-shadow transitions create smooth hover effects for cards and buttons. Here's how to animate shadows efficiently, avoid performance issues, and create material design...
- 4 min readColored Box Shadow in CSS — Glow Effects and Color ShadowsCSS box-shadow isn't limited to black. Create colored glows, neon effects, brand-colored shadows, and multi-layer colored shadows. Includes examples for card hover effects,...
- 6 min readCSS Box Shadow Examples — Generate and Customize Shadow EffectsCSS box-shadow creates drop shadows, inset shadows, and layered shadow effects. Here's how the syntax works, what each parameter does, and ready-to-use shadow examples.
- 5 min readCSS Box Shadow Generator — Build Drop Shadows and Inset EffectsCSS box-shadow creates drop shadows and inset effects with five values: offset-x, offset-y, blur-radius, spread-radius, and color. Here's how to build common shadow effects...
Further reading
Pillar
Part of Frontend & Design.
Written by Mian Ali Khalid. Last updated 2026-05-12.