Material Design box-shadow CSS

Material Design elevation box-shadow: how to replicate in CSS

Material Design 3 uses a system of six elevation levels (0–5) expressed as dp values. Each level combines shadows from two distinct light angles: a direct light shadow (umbra) and an ambient light shadow (penumbra). The CSS implementation always uses at least two box-shadow layers to reproduce this effect faithfully. This page explains the exact values for each level.

Layers

Inset (inner shadow)Enabled

Offset X0pxOffset Y8pxBlur24pxSpread0px

Color

Opacity25%

Presets

Preview shape

Preview & CSS

Box color

Background color

box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.25);

CSS is generated locally in your browser.

Continue in the tool

Open full tool

More pages for this tool

dp elevation and how to translate to CSS

Material Design defines elevation in density-independent pixels (dp). At 160dpi (mdpi), 1dp = 1px. On retina screens (320dpi), 1dp = 2px. For web CSS, dp values translate directly to px in most desktop and mobile interface contexts.
The umbra shadow (direct light) uses less blur and higher opacity. The penumbra shadow (ambient light) uses more blur and lower opacity. Together they create the illusion of depth. In practice: elevation-1 → `0 1px 2px rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.1)`. Elevation-3 → `0 2px 4px rgba(0,0,0,.24), 0 2px 8px rgba(0,0,0,.12)`.

Material Design elevation levels in CSS

Elevation 1 (text buttons, chips)

Input: dp: 1
Expected output: box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.1);

Minimum perceivable elevation. Used for low-emphasis elements.

Elevation 3 (elevated cards, FABs)

Input: dp: 3
Expected output: box-shadow: 0 2px 4px rgba(0,0,0,.24), 0 2px 8px rgba(0,0,0,.12);

Standard for cards and floating action buttons in their default state.

Full tool FAQ

Can I use multiple box-shadow layers?

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.

What does the inset parameter do?

What is the difference between blur and spread?

How should I choose the shadow color?

Does box-shadow affect page layout?

Does CSS box-shadow work in all modern browsers?

How do I replicate shadows from design systems like Material or iOS?

Does box-shadow hurt performance?

Frequently asked questions

Does Material Design 3 use only box-shadow?

No. MD3 uses a combination of box-shadow with a surface tint color overlay based on the primary color. In dark interfaces, the overlay is more visible than the shadow. For faithful replication, combine box-shadow with an adjusted `background-color`.

Can I use CSS variables for elevation levels?

Yes. Define `--shadow-1`, `--shadow-2` etc. as custom properties on `:root`. This lets you change the entire system from a single point — and adapt for dark mode with `prefers-color-scheme`.