About this tool
The Box Shadow Generator lets you build CSS box-shadow declarations by adjusting sliders and colour pickers, then previewing the result live on a sample element. It outputs ready-to-paste CSS you can drop straight into your stylesheet. It is aimed at web developers and designers who want precise shadow values without guessing at numbers or constantly reloading a browser tab.
Reach for this tool when you are styling cards, buttons, or modals and need to dial in the exact look of a shadow. It is also handy when you are translating a design file into code and need to match a shadow visually rather than doing the math manually.
How to use it
- Open the tool and observe the default shadow applied to the preview element.
- Adjust the horizontal and vertical offset sliders to set the shadow direction.
- Set the blur radius and spread radius to control softness and size.
- Pick a shadow colour and set the opacity to match your design needs.
- Toggle the inset option if you need an inner shadow instead of an outer one.
- Copy the generated CSS declaration and paste it into your stylesheet.
Pro tips
- Stack multiple shadows by separating declarations with commas in your CSS — layer a tight dark shadow with a wide soft one for depth.
- Set spread radius to a negative value to shrink the shadow smaller than the element, creating a focused drop effect beneath.
FAQ
Can I add more than one shadow to an element?
Yes. CSS supports multiple box-shadow values separated by commas. Generate each shadow separately and combine them in your stylesheet.
Why does my shadow look different in Safari versus Chrome?
Rendering engines handle sub-pixel blur and colour blending slightly differently. Test your shadow at its intended size in both browsers and adjust the blur or opacity if needed.
Related tools
Looking for something else? Browse browse all free web and code tools – all free, all in your browser.