Elevation 4 Box Shadow CSS

A medium material shadow for layered panels.

box-shadow

Preview Surface

Output

Copy-ready CSS

Pure CSS

box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.24), 0px 12px 20px -10px rgba(0, 0, 0, 0.17);

Tailwind v4

shadow-[0px_4px_8px_-2px_rgb(0_0_0_/_0.24),_0px_12px_20px_-10px_rgb(0_0_0_/_0.17)]

Try it in the generator Open encoded state

When to use it

Elevation 4 is a material box-shadow preset built for systematic elevation. It uses 2 shadow layers to create a elevation effect that is easy to copy into product cards, dashboards, marketing blocks, and small interface surfaces. A medium material shadow for layered panels. The shadow is intentionally described as plain CSS, so you can paste it into any framework or convert it into a Tailwind arbitrary value without changing the visual result. The effect stays on the outside edge, so it reads as lift rather than a pressed or recessed treatment. Use it when you want a repeatable starting point, then open it in the generator to adjust offset, blur, spread, color, opacity, or stacked layers for your own layout.

Explore more