Developer / CSS
CSS Box Shadow Generator
Build a CSS box-shadow visually: offsets, blur, spread, colour, opacity, inset, and several layers, with presets and a live preview, then copy the CSS.
CSS Box Shadow Generator: Each layer becomes one shadow in the box-shadow list: horizontal and vertical offset, blur radius, spread, and a colour written as rgb() with the opacity after a slash. Layers are drawn with the first on top. The preview box's corner radius, colour, and background can be changed to match your design, and the shadow follows the corners just as it will on your page. Runs 100% locally in your browser with zero server file uploads.
- Category
- Developer tools
- Runs
- In your browser
- Cost
- Free · no sign-up
- Availability
- Ready to use
Runs entirely in your browser
CSS
box-shadow: 0px 4px 6px -1px rgb(0 0 0 / 0.1), 0px 2px 4px -2px rgb(0 0 0 / 0.1);
Values are offset right, offset down, blur, spread, and colour. Several thin layers look more natural than one heavy shadow; later layers are drawn underneath earlier ones.
Presets
Elevation
Design systems use shadows to show how far something floats above the page: a card at rest has a small, tight shadow, and a menu or dialog has a larger, softer one. Keeping a few fixed levels, rather than a different shadow everywhere, makes an interface feel consistent.
Shadows on a dark background barely show; there, a lighter surface colour or a thin border does the same job. Pair shadows with a CSS gradient for buttons and cards.
Shadows and performance
A large blur costs more to draw than a small one, which matters when many shadowed elements scroll or animate at once. To animate a shadow on hover, it is smoother to fade in a second, stronger shadow on a pseudo-element with opacity than to change box-shadow itself on every frame.
How to use it
- Start from a preset or adjust the first layer's offsets, blur, spread, and opacity.
- Add more layers for a softer, more realistic shadow, or tick inset for a shadow inside the box.
- Copy the box-shadow declaration.
Privacy & limitations
Everything runs in your browser; your last shadow is kept only in this browser.
Related tools
Frequently asked questions
What are the four numbers in box-shadow?
The horizontal offset (positive moves the shadow right), the vertical offset (positive moves it down), the blur radius (larger is softer, and it cannot be negative), and the spread (positive makes the shadow larger than the box, negative smaller). The colour comes last.
How do I make a shadow look natural?
Use a low opacity, offset the shadow downwards as if lit from above, and combine two or more layers: a small, sharper one close to the box and a larger, softer one further away. A slightly negative spread stops a large blur from showing at the sides.
What does inset do?
It draws the shadow inside the box instead of outside, so the box looks pressed in, which suits input fields and pressed buttons.
Why does my shadow not show on an image?
box-shadow is drawn around the element's box, not around the shape of the picture inside. For the outline of a transparent PNG, use the CSS filter drop-shadow() instead.
Free tool · runs in your browser · no account required