Thin Air Box Shadow CSS

A delicate layered shadow with very light contact.

box-shadow

Preview Surface

Output

Copy-ready CSS

Pure CSS

box-shadow: 0px 1px 2px -1px rgba(15, 23, 42, 0.1), 0px 10px 22px -18px rgba(15, 23, 42, 0.16), 0px 28px 54px -44px rgba(15, 23, 42, 0.2);

Tailwind v4

shadow-[0px_1px_2px_-1px_rgb(15_23_42_/_0.1),_0px_10px_22px_-18px_rgb(15_23_42_/_0.16),_0px_28px_54px_-44px_rgb(15_23_42_/_0.2)]

Try it in the generator Open encoded state

When to use it

Thin Air is a layered box-shadow preset built for multi-step elevation. It uses 3 shadow layers to create a subtle effect that is easy to copy into product cards, dashboards, marketing blocks, and small interface surfaces. A delicate layered shadow with very light contact. 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.

Hexpedia