CSS Box Shadow Generator
Similar CSS Tools
View All
Box Shadow Generator Guide
What it does
Design consistent box shadows for cards, avatars, and headers. Adjust offsets, blur, spread, opacity, and inset, then copy the ready CSS snippet.
How to use
- Pick a shape (card, circle, or header) to match your target element.
- Tune horizontal/vertical offsets to set direction; use negative values for lifted effects.
- Increase blur for softer shadows; tweak spread to tighten or expand the shadow area.
- Set shadow color and opacity; use inset for pressed states.
- Copy the generated CSS and apply it to your component class.
Tips
Keep opacity low (0.08–0.28) for natural shadows. Combine small offset with larger blur for realistic UI depth.
FAQ
Notes
- Negative spread tightens the shadow; positive spread enlarges it.
- Header shape uses full width; card/circle get fixed demo sizes in the snippet.
- Very large blurs may impact performance on low-end devices.
- Match radius with your component to avoid mismatched corners.