Free CSS Box Shadow Generator Tool Online
Create single or multiple CSS box-shadow effects with a live preview, adjustable blur and spread, and copy-ready CSS for any element.
IN: Shadow settings · OUT: CSS box-shadow · RUNS: 100% in your browser
box-shadow: 0px 4px 12px 0px rgba(16, 19, 26, 0.25);
Frequently asked questions
What does each box-shadow value mean?+
In order: horizontal offset, vertical offset, blur radius, spread radius, and color. A positive vertical offset pushes the shadow down; blur softens the edge; spread expands or shrinks the shadow before blurring.
What is an inset shadow?+
Adding 'inset' makes the shadow render inside the element's border instead of outside it, which is useful for pressed-button effects or inner-glow style depth.
Why would I stack multiple shadow layers?+
Layering a tight, dark shadow with a soft, lighter one is a common technique for realistic elevation effects, similar to how Material Design and other design systems build multi-layer shadows for cards and buttons.
Does box-shadow affect an element's layout size?+
No, box-shadow is purely visual and doesn't take up layout space or affect the element's box model, unlike a border.
Is browser support for box-shadow good?+
Yes, box-shadow (including multiple comma-separated shadows) has been supported in all major browsers without vendor prefixes for many years.
Is my shadow configuration saved anywhere?+
No, everything is generated live in your browser — refreshing the page resets to the default single shadow layer.