CSS box shadow examples
Finished shadows for the situations that come up in real interfaces, each with its code in four formats, a note on when to use it, and a link that opens it in the generator. Every card below wears the real shadow.
-
Material elevation levels
Levels 1 to 5 from the Material spec, each a key shadow plus an ambient one.
-
Layered soft shadow
Four layers whose blur doubles each step, so the edge is crisp and the fall-off is soft.
-
Neumorphism (soft UI)
A light shadow up-left and a dark one down-right on a matching background. Read the contrast caveat before shipping it.
-
Glassmorphism card
Translucent box, backdrop blur, a 1px luminous inset edge and a soft drop shadow.
-
Long shadow
The flat-design long shadow: many hard shadows stepping one pixel at a time.
-
Inner shadow (inset well)
The sunk-in well: an inset shadow from the top plus a hairline inner ring.
-
Floating action button
A brand-coloured circle lifted by a tinted, layered shadow.
-
Subtle card hover
A resting shadow and a lifted one, crossfaded on hover without animating box-shadow.
-
Focus ring with box-shadow
Two spread-only shadows: a gap ring in the page colour and a colour ring outside it.
Or read the documentation for how each effect is built.