Back to Home
Published: June 2026•By Web Util Slyce Team•5 min read
CSS Box Shadow — Reference & Examples
Learn how to use the CSS box-shadow property. Generate custom shadows with our Box Shadow Generator.
Box Shadow Syntax
box-shadow: offset-x offset-y blur-radius spread-radius color inset; Example: box-shadow: 2px 4px 8px 0 rgba(0,0,0,0.1);
Shadow Components
| Component | Required | Description |
|---|---|---|
| offset-x | Yes | Horizontal offset (positive = right, negative = left) |
| offset-y | Yes | Vertical offset (positive = down, negative = up) |
| blur-radius | No | Blur distance (0 = sharp edge, larger = softer) |
| spread-radius | No | Expand or shrink the shadow (positive = larger, negative = smaller) |
| color | No | Shadow color (hex, rgba, hsla, named) |
| inset | No | Makes the shadow inner instead of outer drop shadow |
Common Shadow Examples
Subtle
box-shadow: 0 1px 3px rgba(0,0,0,0.1);Use: Cards, buttons
Medium
box-shadow: 0 4px 12px rgba(0,0,0,0.15);Use: Modals, dropdowns
Pronounced
box-shadow: 0 8px 24px rgba(0,0,0,0.2);Use: Dialogs, floating elements
Inner shadow
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);Use: Pressed state, inset cards
Colored shadow
box-shadow: 0 4px 14px rgba(59,130,246,0.4);Use: Branded elements, focus rings
Multiple shadows
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);Use: Layered shadow for depth
Both sides
box-shadow: 0 0 0 1px rgba(0,0,0,0.05);Use: Border-like outline (spread only)
Glow effect
box-shadow: 0 0 20px rgba(59,130,246,0.5);Use: Focus state, glow buttons