Design Tools
CSS Box Shadow: Create Beautiful Shadows
Learn how CSS box-shadow works and techniques for creating modern shadow effects.
The CSS box-shadow property adds shadow effects around elements. It's essential for creating depth and visual polish.
Syntax
box-shadow: offset-x offset-y blur spread color inset;
- offset-x/y: Shadow position
- blur: Softness (0 = sharp)
- spread: Size expansion
- color: Use rgba() for transparency
- inset: Inside the element
Modern Techniques
Subtle card: Two layered shadows create natural effects. 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06)
Elevated hover: Larger blur and offset. 0 10px 25px rgba(0,0,0,0.1)
Inner shadow: inset 0 2px 4px rgba(0,0,0,0.06) for pressed effects.
Tips
Increase blur and reduce opacity for natural shadows. Layer 2-3 shadows for realism. Shadows don't affect layout.
Frequently Asked Questions
Can I add multiple shadows?
Yes! Separate with commas. Layer 2-3 subtle shadows for more realistic effects.
Why does my shadow look harsh?
Increase blur-radius and reduce color opacity. Natural shadows are soft and semi-transparent.
Does box-shadow affect layout?
No. Shadows are visual only and don't affect element size or document flow.