Box Shadow Generator
Generate CSS box-shadow values with a visual editor. Adjust offset, blur, spread, color, and opacity with live preview.
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.25);
Shadow 1
Frequently Asked Questions
How do I create a CSS box shadow online?▾
Use the sliders to adjust horizontal offset, vertical offset, blur radius, spread radius, color, and opacity. The live preview updates instantly and you can copy the generated CSS with one click.
Can I add multiple shadow layers?▾
Yes. Click "Add Layer" to stack multiple box shadows on the same element. Each layer has independent controls for offset, blur, spread, color, opacity, and inset.
What is an inset box shadow?▾
An inset box shadow renders inside the element instead of outside, creating an inner shadow or pressed-in effect. Toggle the "Inset" checkbox on any layer to enable it.
Is my data safe when using this box shadow generator?▾
Yes. All shadow generation and preview happens entirely in your browser. No data is ever sent to a server.