CSS Box Shadow Generator
Design CSS box-shadows with sliders — offset, blur, spread, colour, inset. Layer multiple shadows for realistic depth.
Last updated: April 2026 · Runs in your browser · No sign-up
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.15);Material Design elevation levels
Material Design uses standardised elevation levels (dp). Level 1 is a resting card, level 8 is a raised menu, level 24 is a modal. Each level combines two specific shadows — a technique worth studying even if you're not following the Material spec.
Cheat sheet for common effects
- Subtle card:
0 1px 3px rgba(0,0,0,0.1) - Raised button:
0 4px 6px rgba(0,0,0,0.15) - Modal:
0 20px 40px rgba(0,0,0,0.25) - Pressed (inset):
inset 0 2px 4px rgba(0,0,0,0.1)
Frequently Asked Questions
What do the four values mean?
box-shadow: offset-x offset-y blur spread colour. Offset moves the shadow horizontally/vertically. Blur softens the edge. Spread scales the shadow's size independently of blur.
How do I create realistic depth?
Layer two or three shadows. A soft wide shadow (large blur, low opacity) plus a tight dark shadow (small blur, slightly higher opacity) mimics real ambient + directional light.
What is inset?
inset makes the shadow appear inside the element instead of outside — useful for pressed buttons, recessed cards, or inner glows.
Performance considerations?
Box-shadows are GPU-composited but large blurs on many elements can drop frame rate on mobile. For scroll-heavy pages, keep blur ≤20px and avoid animating shadow directly — use transform instead.