What is a dp elevation level?

In Material Design, dp (density-independent pixels) describes how far a surface is raised above the baseline. Higher elevation = larger, softer shadow. Levels range from 0 (flat) to 24dp (dialogs, drawers).

Why are there multiple shadow layers?

Material Design uses two or three box-shadow layers — a key shadow (directional, simulating the light source) and an ambient shadow (soft, 360-degree) — to create a realistic depth illusion.

Can I use these shadows on dark backgrounds?

Yes. Change the shadow color to a mid-tone or use a white-tinted shadow with low opacity. The opacity slider lets you reduce the shadow intensity for dark surfaces.

How do Tailwind shadow classes compare?

Tailwind's shadow-sm/md/lg/xl/2xl are designed for general use and roughly map to Material elevations 1, 2, 6, 12, and 16. The reference table below shows the closest equivalents.

Is the generated CSS production-ready?

Yes. The output is a standard CSS box-shadow property with no vendor prefixes needed for modern browsers (Chrome, Firefox, Safari, Edge all support unprefixed box-shadow).

Shadow Elevation Helper

Name: Shadow Elevation Helper
Availability: InStock
Author: Nham Vu

Generate Material Design elevation box-shadows with live preview, copy-ready CSS, and a full reference table.

Shadow Controls

Elevation 4dp

Shadow Color

#000000

Opacity 14%

Light Angle 180°

TopRightBottomLeftTop

Generated CSS

Live Preview

Background:

Elevation: 4dp

Material Design Elevation Reference

Standard shadow values for key elevation levels with Tailwind equivalents.

Level	Usage	Tailwind Class	Preview	Copy

Copied!

Summary

Generate Material Design elevation box-shadows with live preview, copy-ready CSS, and a full reference table.

How it works

Drag the elevation slider or click a preset level (0–24dp).
Optionally adjust shadow color and opacity with the color picker and opacity slider.
Change the light-source angle to tilt shadows left, right, or center.
The card preview updates in real time showing the generated shadow.
Click "Copy CSS" to copy the box-shadow rule to your clipboard.
Scroll down to the reference table to compare standard Material Design elevation values.

Use cases

Match Material Design elevation semantics in custom CSS or design tokens.
Quickly prototype card depth before committing to a design system.
Verify that Tailwind shadow classes match the intended elevation level.
Export exact box-shadow values for Figma, Sketch, or code components.
Adjust shadow tint for dark-mode surfaces or colored backdrops.
Generate elevation CSS for web components, dashboards, or landing pages.

Frequently Asked Questions

Last updated: 2026-07-01 · Reviewed by Nham Vu