Material Design CSS Box-Shadow Examples

Google's official elevation system shadows from 1dp to 24dp.
Click any box to copy the CSS to your clipboard.

Related Tools

Create your own custom shadow designs with these generators:

CSS Box Shadow Generator

Generate custom box shadows

Tailwind Box Shadow Generator

Generate Tailwind shadow classes

← See all box shadow styles

Explore Other Styles

Browse shadow examples in different design styles:

Stripe

Professional payment UI

Neumorphism

Soft UI with subtle shadows

Neubrutalism

Bold borders and stark contrast

Claymorphism

Clay-like 3D depth

Tailwind

Tailwind CSS default styles

Extract any box shadow style in 2 clicks

Click any element on any website to get its box shadow styles instantly. Frontend Hero gives you 10+ essential developer tools in one browser extension.

Get Frontend Hero now →