Box Shadow Generator
Build CSS box-shadow effects with a visual editor. Stack multiple shadow layers, adjust colors and opacity, and copy the CSS code.
Shadow 1
Preview Settings
CSS Output
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);
CSS Box Shadow
The box-shadow CSS property adds shadow effects around an element. You can stack multiple shadows, use inset for inner shadows, and control blur, spread, and color.
Syntax
box-shadow: [inset] x-offset y-offset blur spread color;
Frequently Asked Questions
What is box-shadow in CSS?
box-shadow is a CSS property that adds shadow effects around an element's frame. You can control horizontal/vertical offset, blur radius, spread, and color.
Can I stack multiple shadows?
Yes. CSS supports multiple box-shadow values separated by commas. This tool lets you add and manage multiple shadow layers visually.
What is an inset shadow?
An inset shadow appears inside the element instead of outside it. It creates a pressed or recessed effect. Add the 'inset' keyword before the shadow values.