Material Elevation Generator

How to use

1. 1Click an elevation level in dp, from 0 (flat) up to 24 (the highest, used for dialogs). The note under the chips shows which components use that level.
2. 2Watch the live preview update on both the light and dark surface so you can judge the shadow on your real background.
3. 3Leave the color on black to match Material exactly, or pick a tint with the color swatch or hex field. The 0.2, 0.14, and 0.12 layer opacities stay fixed.
4. 4Choose an output format: CSS, CSS variable, Tailwind config, or React Native StyleSheet.
5. 5Press Copy output to copy the snippet, then paste it into your stylesheet, Tailwind config, or component.
6. 6Use the layer table to see the exact x, y, blur, spread, and opacity of the key, penumbra, and ambient shadows. Press Reset to start over.

About this tool

Material Elevation Generator converts a Material Design elevation level into the precise drop shadow that the Material spec assigns to it, and gives you that shadow as copy-ready code. In Material Design, depth is described by elevation measured in density-independent pixels (dp), and each level from 0 to 24 dp maps to a specific shadow. The catch is that a Material shadow is not one box-shadow: it is three stacked layers. A sharp key (umbra) shadow sits directly under the element at opacity 0.2, a softer penumbra fans out around it at opacity 0.14, and a wide ambient shadow suggests overall lift at opacity 0.12. Those three opacities are fixed by the spec; only the offset, blur, and spread of each layer change as the elevation rises. The per-dp values built into this tool are the canonical ones used by the reference Material implementations (the same numbers behind Angular Material mat-elevation-z classes and MDC), so the shadow you copy matches what frameworks actually render rather than a rough approximation. Pick any of the standard levels and the tool shows a live preview on both a light and a dark surface, a full breakdown of all three shadow layers with their exact x, y, blur, spread, and opacity, and four export formats. The CSS tab gives a ready box-shadow declaration. The CSS variable tab wraps it in a :root custom property with a usage example. The Tailwind tab emits a theme.extend.boxShadow entry plus the matching shadow- utility class name. The React Native tab returns a StyleSheet object: iOS reads shadowColor, shadowOffset, shadowOpacity, and shadowRadius, while Android draws its shadow from the elevation number alone (which is simply the dp value), so the snippet sets both for a consistent cross-platform result, and includes the New Architecture boxShadow string for React Native 0.76 and newer. The standard levels line up with real components, so the chips note where each is used: cards rest at 1 dp, contained buttons at 2 dp, app bars at 4 dp, floating action buttons at 6 dp, menus and bottom navigation at 8 dp, navigation drawers at 16 dp, and dialogs at the top of the scale at 24 dp. The shadow color defaults to pure black to match the spec, but you can tint it (brand-tinted shadows are common in modern interfaces) while the layer opacities stay true to Material. Everything is computed in your browser. Nothing you choose or type is uploaded, logged, or stored.

Free to use. Works in your browser. No signup, no login.