Box Shadow
Create stunning multi-layer box shadows with depth and dimension
Shadow Layers
The box-shadow property adds shadow effects around an element's frame. Multiple shadows can be combined to create realistic depth and visual hierarchy in your designs.
1Understanding Shadow Anatomy
box-shadow: inset? x y blur spread color;2Shadow Types
3Design Principles
Light Source Consistency
Shadows should follow a consistent light direction (typically from top-left).
Elevation Hierarchy
Higher elevation = more prominent shadow. Use consistently across UI.
4Quick Reference
0 4px 6px rgba(0,0,0,0.1)0 10px 15px rgba(0,0,0,0.1)0 20px 25px rgba(0,0,0,0.15)0 1px 3px rgba(0,0,0,0.1)inset 0 2px 4px rgba(0,0,0,0.06)0 0 0 3px rgba(59,130,246,0.5)5Performance Tips
⚠️ Avoid
- • Animating box-shadow directly (use transform)
- • Very large blur radius (>50px)
- • Many overlapping shadows
✓ Best Practices
- • Use transform + opacity for animations
- • Keep shadows subtle (low opacity)
- • Use CSS variables for consistency
What is CSS Box Shadow Generator?
The CSS `box-shadow` property adds shadow effects around an element's frame. You can set multiple shadow layers, each with horizontal offset, vertical offset, blur radius, spread radius, and color. Shadows are drawn outside the element by default but can be inset. Well-crafted shadows create depth and hierarchy, guiding the user's eye to important UI elements.
Read the full CSS box-shadow guideTips & Best Practices
- 1Use multiple shadow layers — a tight, dark shadow for definition plus a larger, softer one for ambient depth.
- 2Keep horizontal offset at 0 for natural-looking shadows; light rarely comes from the side.
- 3Use `rgba()` or `hsla()` colors with low opacity rather than gray for more natural-looking shadows.
- 4Match shadow direction consistently across your UI — inconsistent light sources look unnatural.
- 5Use inset shadows for pressed/active button states or to create inner glow effects.
- 6Combine `box-shadow` with `border-radius` for organic, floating card effects.
Frequently Asked Questions
box-shadow applies a rectangular shadow to the element's box, including its border-radius shape. drop-shadow (via the filter property) follows the actual shape of the element, including transparent areas in images. Use box-shadow for UI elements and drop-shadow for images with transparency.
Yes. Separate each shadow with a comma in the box-shadow property. Shadows are painted in order — the first shadow is on top. This technique creates realistic depth by combining a tight definition shadow with a softer ambient shadow.
Adding the `inset` keyword makes the shadow appear inside the element instead of outside. Inset shadows are useful for creating pressed button states, inner glow effects, or recessed/embossed UI patterns.
box-shadow does not affect layout — it is purely visual and does not change the element's size or position. Performance-wise, complex multi-layer shadows with large blur values can trigger repaints, but modern browsers handle them efficiently for typical use cases.
Neumorphism combines a light shadow (offset toward the light source) and a dark shadow (offset away from it) on a background that matches the element color. Use inset or outer shadows depending on whether you want a raised or recessed look.