CSS Box Shadow Generator
Adjust offset, blur, spread, color, and opacity with live sliders to design a box-shadow effect on a preview card, then copy the exact CSS box-shadow property — including support for multiple stacked shadows.
Design & CSS Tools Runs entirely in your browser
All processing happens on your device — nothing is sent to a server.
CSS code
box-shadow: 0px 8px 20px -2px rgba(0, 0, 0, 0.25);
What this tool does
Builds an element's shadow by setting horizontal and vertical offset, blur, spread, colour and opacity, with an inset option, and gives you the CSS.
When to use it
- A card or button needing a shadow to lift it off the background.
- Tuning an existing shadow to be softer or more pronounced.
- An inset shadow for an input field or a recessed area.
- Making shadows consistent across design elements.
How to use it
- Set the "Horizontal offset" and "Vertical offset".
- Set the "Blur" and "Spread".
- Choose the "Color" and "Opacity", and enable "Inset shadow" if you want one.
- Copy the "CSS code".
A practical example
Input
A small vertical offset with moderate blur and low opacity.
Output
A soft natural shadow beneath the element, with ready CSS.
A natural shadow comes from a slight vertical offset and low opacity; the hard black shadow is what makes a design look dated.
Limitations
- Many strong shadows weigh a design down visually and can affect rendering performance on busy pages.
- An inset shadow is drawn inside the element's bounds, so its effect is entirely different from an outer one.
- This generates a single shadow; layered shadows require combining values by hand.
Privacy and processing
The shadow is composed on your device and nothing is sent to a server.
Technical notes
- Colour and opacity are separate in the interface because a natural shadow relies on a translucent colour rather than a solid grey.