Free online CSS box-shadow generator. Visualize and adjust box-shadow parameters with multi-layer support, preset effects, live preview, and one-click copy. Pure frontend, no server uploads.
Zero Dependencies · Works Offline⨠Presets
ποΈ Parameters
Shadow Layer 1
4
4
12
0
ποΈ Live Preview
π CSS Code
Adjust parameters to generate CSS code
β FAQ
What do the box-shadow parameters mean?
Horizontal offset (X) and vertical offset (Y) set the shadow position. Blur determines softness, spread controls size, and color sets the shadow color. Inset makes the shadow appear inside the element.
How do I create multi-layer shadows?
Click "Add Layer" to stack up to 5 shadow layers, each with independent parameters. Layers are comma-separated, enabling Material Design-style depth effects.
Which browsers support the generated code?
box-shadow is supported from IE9+ onward. Chrome, Firefox, Safari, and Edge fully support it with no vendor prefixes needed.