Floating Panel Box Shadow CSS

A stepped shadow for panels that hover above the page.

box-shadow

Preview Surface

Output

Copy-ready CSS

Pure CSS

box-shadow: 0px 6px 12px -6px rgba(2, 6, 23, 0.26), 0px 18px 36px -20px rgba(2, 6, 23, 0.3), 0px 44px 82px -48px rgba(2, 6, 23, 0.28);

Tailwind v4

shadow-[0px_6px_12px_-6px_rgb(2_6_23_/_0.26),_0px_18px_36px_-20px_rgb(2_6_23_/_0.3),_0px_44px_82px_-48px_rgb(2_6_23_/_0.28)]

Try it in the generator Open encoded state

When to use it

Floating Panel is a layered box-shadow preset built for multi-step elevation. It uses 3 shadow layers to create a panel effect that is easy to copy into product cards, dashboards, marketing blocks, and small interface surfaces. A stepped shadow for panels that hover above the page. 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