CSS box shadow generator with a real light source
Drag a light and get layered, realistic CSS box shadows that fall away from it. Copy plain CSS or a Tailwind class. Free, no sign up, works in the browser.
box-shadow:
0.5px 1.3px 2.3px 0px rgb(11 11 20 / 0.171),
1.1px 2.5px 4.7px -0.4px rgb(11 11 20 / 0.154),
2.2px 5px 9.4px -0.8px rgb(11 11 20 / 0.137),
4.3px 10px 18.7px -1.5px rgb(11 11 20 / 0.12),
8.6px 20px 37.4px -3px rgb(11 11 20 / 0.102);
shadow-[0.5px_1.3px_2.3px_0px_rgb(11_11_20_/_0.171),1.1px_2.5px_4.7px_-0.4px_rgb(11_11_20_/_0.154),2.2px_5px_9.4px_-0.8px_rgb(11_11_20_/_0.137),4.3px_10px_18.7px_-1.5px_rgb(11_11_20_/_0.12),8.6px_20px_37.4px_-3px_rgb(11_11_20_/_0.102)]
How to use it
- 1Drag the light anywhere on the stage. Shadows fall away from it.
- 2Set elevation for how far the card floats, and softness for how diffuse the light is.
- 3Choose how many layers to stack. More layers read as more natural.
- 4Copy the CSS or the Tailwind arbitrary class into your project.
Why layered shadows look real
A single box-shadow reads as a flat grey halo. Real objects cast a tight, dark contact shadow close to the edge and a wide, faint penumbra further out. Stacking three to six shadows with doubling offsets and blur, and shrinking opacity, reproduces that falloff.
Direction matters as much as softness. When every shadow on a page falls away from the same light, surfaces feel like they share one space. This generator computes the offset from the light position, so you can match shadows across a whole design.
Use the output with Tailwind CSS
Paste the CSS into a class, or use the Tailwind arbitrary value shadow-[...] the tool prints. In Tailwind CSS v4 you can also register it as a theme token with --shadow-raised inside @theme and use shadow-raised everywhere.
@theme {
--shadow-raised: 0 1px 1px rgb(0 0 0 / 0.08), 0 2px 4px rgb(0 0 0 / 0.07), 0 6px 12px rgb(0 0 0 / 0.06);
}
Shadows that move with the pointer
MiniDev UI takes this one step further: a light provider writes the light position into CSS variables, and every shadow token reads them, so the whole interface re-lights as the pointer moves. The light source shadows guide shows how it works.
Frequently asked questions
How many shadow layers should I use?
Three to five layers look natural for cards. Use one or two for small controls like buttons and inputs, where heavy shadows feel muddy.
Do layered box shadows hurt performance?
Static shadows are cheap. Animating box-shadow on many elements can be costly, so animate transform or opacity instead, or fade between two shadow states.
Why do my shadows look dirty on colored backgrounds?
Pure black shadows desaturate what is below them. Tint the shadow toward the background hue, or lower the opacity, for a cleaner result.
Can I use the result in Tailwind?
Yes. Copy the shadow-[...] class, or add the value to @theme as a named shadow token in Tailwind CSS v4.