CSS box-shadow generator
Design realistic shadows by stacking several layers, the way the best design systems do. Tune each layer’s offset, blur, spread, color and opacity and copy the result as CSS or as a Tailwind class.
Processed 100% in your browser
Ctrl + Enter runCtrl + C copy result
How to use
- 1Start from a style (soft, elevation, floating…) or from scratch.
- 2Select a layer and adjust its offset, blur, spread, color and opacity.
- 3Add layers with “+” for more natural shadows, or tick “inset” for inner shadows.
- 4Change the box color, background and radius, then copy the CSS or the Tailwind class.
Use cases
- Cards, dropdowns and modals with realistic depth.
- Hover and elevation states for buttons.
- Brutalist styles with hard shadows or glow effects.
- Form fields with an inner shadow.
Frequently asked questions
How does the box-shadow property work?
It takes a horizontal and vertical offset, blur, spread and color, plus the optional inset keyword. You can chain several shadows separated by commas; the first one is drawn on top.
Why use several layers?
Real shadows have a sharp area close to the object and a diffuse one further away. Stacking layers with different blur and low opacity mimics that and looks far more natural.
What does the spread value do?
It grows (positive values) or shrinks (negative values) the shadow before blurring it. A negative spread with a large blur creates soft shadows that don’t peek out from the sides.
How do I use it in Tailwind CSS?
Pick the Tailwind tab and copy the arbitrary-value class, for example shadow-[0px_10px_30px_-5px_rgba(0,0,0,0.2)]. It works in Tailwind v3 and v4 with no extra configuration.