Box Shadow Generator
Design beautiful, layered box shadows and instantly copy the CSS.
Box Shadow
Design beautiful, layered depth.
1Layer
2Layer
box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.1),
0px 8px 10px -6px rgba(0, 0, 0, 0.1);Mastering Box Shadows
The CSS box-shadow property attaches one or more shadows to an element. To create truly modern and realistic shadows, it's best practice to stack multiple shadow layers with varying blurs and opacities.
Layering for Realism
A single shadow often looks harsh and artificial. By combining a tight, dark shadow for the object's contact point and a large, diffuse, highly transparent shadow for the ambient occlusion, you can simulate natural lighting. This tool makes it easy to add and tweak multiple layers independently.
Understanding the Values
- Horizontal & Vertical Offset: Moves the shadow relative to the element.
- Blur Radius: How soft the shadow is. A value of 0 means a sharp, solid block of color.
- Spread Radius: Positive values expand the shadow, negative values shrink it.
- Inset: Changes the shadow from an outer shadow (drop shadow) to an inner shadow.
Related Guides
Deepen your understanding with our expert articles.