CSS Box Shadow Generator
Build a CSS box-shadow visually and copy the generated declaration, entirely in your browser.
This tool formats a box-shadow declaration from controlled numeric inputs and a colour. It runs entirely in your browser.
Shadow rendering can vary slightly between browsers, displays and zoom levels.
How to use it
- Adjust the offsets, blur, spread, colour, and opacity for the first shadow layer
- Toggle inset if you want the shadow drawn inside the element
- Add more layers and reorder them with move up and move down if needed
- Copy the generated box-shadow declaration, or Reset to start from the default
For each shadow layer, set the horizontal and vertical offsets, the blur radius, the spread radius, a colour, and an opacity from 0 to 100 percent; toggle inset to draw the shadow inside the element instead of outside. Stack up to five layers, reorder them with move up and move down, and remove any layer down to one. A neutral preview card updates live as you adjust the controls, and the read-only output shows the exact box-shadow declaration ready to paste. Every value comes from bounded numeric inputs and a validated hex colour — there is no free-form CSS, so url(), var(), and calc() are never accepted. Everything runs locally: nothing is uploaded or stored. This does not support text-shadow, and it is separate from the CSS Gradient Generator, which builds background gradients rather than element shadows.
FAQ
It draws one or more shadows around a box: their horizontal and vertical offset, blur softness, spread size, colour, and whether the shadow sits outside the element or inset within it.
Yes. You can stack up to five shadow layers in a single box-shadow value, each with its own settings, and reorder them since earlier layers are painted on top of later ones.
Inset draws the shadow inside the element's border box instead of outside it, which is useful for pressed-button or inner-glow effects. It is a per-layer toggle.
Blur softens the shadow's edge over a distance; spread grows or shrinks the shadow before the blur is applied, so a positive spread makes a larger, harder shadow.
No. The declaration is built in your browser from the numeric controls and colour. Nothing is sent to a server, nothing is written to storage, and only an anonymous tool-usage event is recorded.