Editorial Stack Box Shadow CSS

A publication-style stack with a visible paper edge.

box-shadow

Preview Surface

Output

Copy-ready CSS

Pure CSS

box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.15), 0px 8px 18px -12px rgba(17, 24, 39, 0.18), 0px 28px 54px -32px rgba(17, 24, 39, 0.28);

Tailwind v4

shadow-[inset_0px_1px_1px_0px_rgb(255_255_255_/_0.15),_0px_8px_18px_-12px_rgb(17_24_39_/_0.18),_0px_28px_54px_-32px_rgb(17_24_39_/_0.28)]

Try it in the generator Open encoded state

When to use it

Editorial Stack is a layered box-shadow preset built for multi-step elevation. It uses 3 shadow layers to create a paper effect that is easy to copy into product cards, dashboards, marketing blocks, and small interface surfaces. A publication-style stack with a visible paper edge. 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. It includes 1 inset layer, so it can make a surface feel pressed into the canvas instead of floating above it. 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