Neuro Ridge Box Shadow CSS

A two-direction ridge for beveled settings panels.

box-shadow

Preview Surface

Output

Copy-ready CSS

Pure CSS

box-shadow: 10px 10px 22px -15px rgba(15, 23, 42, 0.45), -10px -10px 22px -15px rgba(100, 116, 139, 0.26), inset 0px 1px 1px 0px rgba(255, 255, 255, 0.16);

Tailwind v4

shadow-[10px_10px_22px_-15px_rgb(15_23_42_/_0.45),_-10px_-10px_22px_-15px_rgb(100_116_139_/_0.26),_inset_0px_1px_1px_0px_rgb(255_255_255_/_0.16)]

Try it in the generator Open encoded state

When to use it

Neuro Ridge is a neumorphism box-shadow preset built for soft bevel contrast. It uses 3 shadow layers to create a beveled effect that is easy to copy into product cards, dashboards, marketing blocks, and small interface surfaces. A two-direction ridge for beveled settings panels. 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 1 inset layer, 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