CSS Box Shadow Generator
Design layered CSS box shadows with Tailwind and Material presets. Copy CSS or Tailwind classes.
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
Presets
Layers
The first layer is drawn on top. Up to 10 layers.
Box
Preview only, not in the code
CSS Box Shadow Generator FAQ
How do I add a shadow to a div in CSS?
Use the box-shadow property: box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); means 0 px across, 4 px down, 12 px blur, in black at 15% opacity. Build the shadow here, click Copy and paste the line into the rule for your div.
What is the difference between margin and box-shadow spread?
Spread grows or shrinks the shadow itself and never moves other elements, because a shadow takes up no space in the layout. Margin adds real space around the element and pushes its neighbours away. A negative spread makes the shadow smaller than the box, which keeps it from showing at the sides.
How do I make a shadow look more natural?
Stack several low-opacity layers that grow in offset and blur, like the Layered Soft and Long presets. Real shadows are darker and sharper near the object and softer further away, which one layer cannot show.
What does inset do in box-shadow?
Inset draws the shadow inside the box instead of outside it, so the element looks pressed in. It is often used for input fields, toggles and the active state of buttons. Turn on Inset for any layer to try it.
How do I use this shadow in Tailwind CSS?
Open the Tailwind tab and copy the class, for example shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1)]. Spaces become underscores in Tailwind arbitrary values, and the class works in Tailwind CSS v3 and v4 without changing your config.
Is my design uploaded anywhere?
No. The shadow is worked out in your browser and nothing is sent to a server. If you use your own image as the backdrop, it is only opened on your device.