Material Design Elevated Card Shadow

Material Design's elevation system uses soft, downward, low-opacity shadows to suggest a card floating slightly above the page — no harsh edges, no strong offset, just enough blur to read as depth rather than a hard-edged drop shadow.

shadowPreset: elevated  ·  offsetX: 0  ·  offsetY: 4  ·  shadowBlur: 12  ·  spread: 0  ·  shadowColor: #000000  ·  shadowOpacity: 0.15  ·  isInset: false

Frequently asked questions

Why is the shadow offset only 4px?

Material elevation shadows use a small vertical offset with a larger blur radius — the blur does most of the work of suggesting depth, not a large offset, which would look like a heavier drop shadow instead.

What opacity should an elevation shadow use?

Typically low, around 0.1-0.2 — high-opacity shadows read as harsh drop shadows rather than the soft, subtle elevation Material Design aims for.

How do I make the card look "more elevated"?

Increase both the offset and blur together (e.g. offset 8px, blur 24px) to suggest a card floating further above the page — this generator's sliders let you dial that in live.