Teal Shadow Box Shadow CSS

A brand-friendly teal shadow with modern softness.

box-shadow

Preview Surface

Output

Copy-ready CSS

Pure CSS

box-shadow: 0px 20px 48px -22px rgba(20, 184, 166, 0.45), 0px 8px 18px -12px rgba(2, 6, 23, 0.22);

Tailwind v4

shadow-[0px_20px_48px_-22px_rgb(20_184_166_/_0.45),_0px_8px_18px_-12px_rgb(2_6_23_/_0.22)]

Try it in the generator Open encoded state

When to use it

Teal Shadow is a colored box-shadow preset built for color-led emphasis. It uses 2 shadow layers to create a teal effect that is easy to copy into product cards, dashboards, marketing blocks, and small interface surfaces. A brand-friendly teal shadow with modern softness. 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