Rose Shadow Box Shadow CSS

A rose-tinted shadow for expressive UI surfaces.

box-shadow

Preview Surface

Output

Copy-ready CSS

Pure CSS

box-shadow: 0px 22px 48px -24px rgba(244, 63, 94, 0.42), 0px 6px 16px -10px rgba(17, 24, 39, 0.2);

Tailwind v4

shadow-[0px_22px_48px_-24px_rgb(244_63_94_/_0.42),_0px_6px_16px_-10px_rgb(17_24_39_/_0.2)]

Try it in the generator Open encoded state

When to use it

Rose Shadow is a colored box-shadow preset built for color-led emphasis. It uses 2 shadow layers to create a rose effect that is easy to copy into product cards, dashboards, marketing blocks, and small interface surfaces. A rose-tinted shadow for expressive UI surfaces. 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