Smooth
Box Shadow CSS Examples
Ten box-shadow styles rendered live — every card below wears its actual CSS stack, not a screenshot, on the light or dark surface it was tuned for. The set covers the shadows real interfaces use: a smooth multi-layer falloff, a soft single-layer UI shadow, three Material-style elevation depths, both neumorphic directions, a brutalist hard offset, and an inset glow. Copy any of them as CSS or a Tailwind utility, or open one in the box shadow generator and make it yours.
The quickest way to judge a shadow is against your own surface tone: a stack tuned for white nearly disappears on near-black, which is why the dark-surface examples here run at much higher opacity. If you are between two depths, pick the shallower one — under-shadowed reads as flat, but over-shadowed reads as floating, and flat is the easier fix.
Layered examples like the smooth falloff copy as one box-shadow declaration with comma-separated layers, so they paste anywhere plain CSS works, Tailwind included — the Tailwind button carries the whole stack as a single arbitrary-value shadow utility with zero config.