Material elevation levels

When to use it

Use Material's elevation shadows when the product already speaks Material, or when you want a proven, documented scale rather than one you have to argue for. Google's elevation system is the most widely deployed shadow scale in existence: it ships in every Android app and in every Material component library, and it has been refined since 2014. Its own documentation makes the case for shadows in one line: they "are the only visual cue indicating the amount of separation between surfaces". If a team needs to agree on how far a card, a menu and a dialog float above the page, "we use Material levels 1, 8 and 24" ends the argument.

How it is built

Every level is three shadows, named for the three parts of a physical shadow. The umbra is the dark core, cast by the key light, and it uses a negative spread so it is narrower than the surface and only shows beneath it. The penumbra is the soft edge. The ambient shadow is the faint, wide glow from the room's general light, with no offset to speak of. The Material Components source fixes the three opacities at 0.2, 0.14 and 0.12 and gives a map of offsets and blurs for each of the 25 levels; the values on this page are copied from it. Level 2, the resting card shown above, is:

box-shadow:
  0 3px 1px -2px rgba(0, 0, 0, 0.2),   /* umbra: negative spread   */
  0 2px 2px rgba(0, 0, 0, 0.14),        /* penumbra                 */
  0 1px 5px rgba(0, 0, 0, 0.12);        /* ambient                  */

Notice what the umbra's negative spread does: the darkest layer never shows at the sides, so the card reads as lit from directly above. It is the single most useful trick to steal from the system, and the spread section of the docs shows it on its own.

The five levels

These are the five resting elevations you will use most: card (1), raised card or button (2), app bar or hover (4), menu (8) and dialog (24). Each opens in the generator with its three layers.

Notes and limits

The system was designed for white surfaces under Material's flat, bright lighting, and that is where black shadows look right. On a tinted page, a warm page or a dark theme they turn grey and muddy; Material 3 leans on tonal surface colours as well as shadows partly for that reason. If you take the ratios but not the aesthetic, swap the black for a dark tone of your page's hue and keep the opacities. The layered soft shadow example is that adaptation. And do not animate between levels with a box-shadow transition; a hover from 1 to 4 is exactly the case the performance guide shows how to crossfade instead.

The code in four formats

Straight from the generator's readout for this state. Copy the one your project speaks; the output formats guide explains where each goes.

box-shadow:
  0 3px 1px -2px rgba(0, 0, 0, 0.2),
  0 2px 2px rgba(0, 0, 0, 0.14),
  0 1px 5px rgba(0, 0, 0, 0.12);
border-radius: 8px;

$shadow:
  0 3px 1px -2px rgba(0, 0, 0, 0.2),
  0 2px 2px rgba(0, 0, 0, 0.14),
  0 1px 5px rgba(0, 0, 0, 0.12);

.element {
  box-shadow: $shadow;
  border-radius: 8px;
}

<div class="shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),_0_2px_2px_rgba(0,0,0,0.14),_0_1px_5px_rgba(0,0,0,0.12)] rounded-[8px]"></div>

/* Or name it once in your theme (Tailwind v4): */
@theme {
  --shadow-custom: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 1px 5px rgba(0, 0, 0, 0.12);
}
/* then use class="shadow-custom" */

.element
  box-shadow 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 1px 5px rgba(0, 0, 0, 0.12)
  border-radius 8px