Create soft or sharp CSS box shadows with a live preview.
Last reviewed by the OnlineToolPro team
Tweak a box shadow with sliders and see it on a card instantly — from subtle elevation to bold drop shadows, including inner (inset) shadows.
How it works
3 simple steps. No experience needed.
Good to know
Horizontal and vertical offset move the shadow, blur softens its edge, spread grows or shrinks it, and opacity controls how dark it is. Inset puts the shadow inside the box, as if the surface were pressed in.
Real shadows are soft and fall downward. A small vertical offset, a large blur, a slightly negative spread and low opacity look natural; heavy, dark shadows tend to look dated.
FAQ
Positive spread makes the shadow bigger than the box; negative spread makes it smaller, which gives softer, more realistic shadows.
Not noticeably for normal use. Very large blurs on many elements that animate can affect scrolling on slow phones.
Other tools you might find useful next.
Generate and tidy up CSS with live previews. 4 free tools.