Inner Glow Box Shadow CSS

A colored inset glow for selected controls.

box-shadow

Preview Surface

Output

Copy-ready CSS

Pure CSS

box-shadow: inset 0px 0px 18px -4px rgba(56, 189, 248, 0.62), inset 0px 0px 0px 1px rgba(56, 189, 248, 0.4);

Tailwind v4

shadow-[inset_0px_0px_18px_-4px_rgb(56_189_248_/_0.62),_inset_0px_0px_0px_1px_rgb(56_189_248_/_0.4)]

Try it in the generator Open encoded state

When to use it

Inner Glow is a inset box-shadow preset built for recessed interface depth. It uses 2 shadow layers to create a glow effect that is easy to copy into product cards, dashboards, marketing blocks, and small interface surfaces. A colored inset glow for selected controls. 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 2 inset layers, 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