Material Design box-shadow CSS
The Material Design elevation effect never relies on a single shadow. It combines two `box-shadow` layers with different blur and opacity: one closer and more opaque, simulating direct light hitting the element, and one wider and more transparent, simulating ambient light reflected around it. The higher the elevation level, the larger the vertical offset and blur of both layers, and the lower the opacity of each one. This generator writes both layers ready to copy.
Two layers hugging the element. Good for cards, chips and secondary buttons that should not stand far off the surface.
An intermediate step between resting and full emphasis. Works well for dropdown menus and tooltips.
Standard for modal dialogs and floating menus in their default state, sitting above the page content.
Yes. CSS allows as many layers as needed, separated by commas. Each layer has its own offset, blur, spread and color parameters, enabling much richer effects than a single shadow.
No. MD3 combines box-shadow with a light surface-color overlay based on the primary color. On dark screens, that overlay is often more visible than the shadow itself, so replicating box-shadow alone is not enough for the full effect.
Yes. Define `--shadow-1`, `--shadow-2` and so on as custom properties on `:root`, each already holding both combined layers. You change the entire system from a single place, and you can redefine the same names inside a `@media (prefers-color-scheme: dark)` block.
Because a single dark shadow reads as an artificial outline, while two light shadows with different blur and opacity mimic how light actually behaves around a physical object: one part concentrated near the base and another diffuse, wider and weaker.
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.25);CSS is generated locally in your browser.