CSS Box Shadow: From Subtle to Dramatic Effects
3 min read
Box shadows add depth and dimension to UI elements. A well-crafted shadow can make a card float off the page or a button look pressable. Here's how the property works.
The box-shadow Syntax
box-shadow: h-offset v-offset blur spread color;
- H-offset - positive pushes right, negative pushes left
- V-offset - positive pushes down, negative pushes up
- Blur - how soft the shadow edge is (0 = sharp)
- Spread - positive expands the shadow, negative shrinks it
- Color - use rgba() for transparency
Common Shadow Recipes
Subtle card: 0 1px 3px rgba(0,0,0,0.12)
Elevated: 0 10px 30px rgba(0,0,0,0.15)
Inner glow: inset 0 0 20px rgba(124,58,237,0.3)
Design Shadows with Toolium
The Box Shadow Generator lets you adjust every parameter with sliders and see the result in real-time. Start with presets like "Subtle" or "Large" and fine-tune from there. Copy the CSS with one click.
Try the tool mentioned in this article
Open tool