Neuro Concave Box Shadow CSS

A concave neumorphic surface with subtle inner weight.

box-shadow

Preview Surface

Output

Copy-ready CSS

Pure CSS

box-shadow: inset 10px 10px 24px -14px rgba(2, 6, 23, 0.48), inset -8px -8px 20px -14px rgba(100, 116, 139, 0.28), 0px 20px 46px -35px rgba(0, 0, 0, 0.28);

Tailwind v4

shadow-[inset_10px_10px_24px_-14px_rgb(2_6_23_/_0.48),_inset_-8px_-8px_20px_-14px_rgb(100_116_139_/_0.28),_0px_20px_46px_-35px_rgb(0_0_0_/_0.28)]

Try it in the generator Open encoded state

When to use it

Neuro Concave is a neumorphism box-shadow preset built for soft bevel contrast. It uses 3 shadow layers to create a inset effect that is easy to copy into product cards, dashboards, marketing blocks, and small interface surfaces. A concave neumorphic surface with subtle inner weight. 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.

Hexpedia