CSS Neumorphism Generator

Build soft UI neumorphic shadows with live preview and copy-ready CSS. Adjust intensity, blur, and shape. Free online, no signup.

Preparing private browser tool…

Your file will stay on this device.

What is neumorphism?

Neumorphism (or soft UI) is a design style where elements look like they are extruded from the background using two soft shadows: a light one on one side and a dark one on the other. The result is a subtle, tactile, almost embossed appearance.

Adjust the size, color, distance, and blur above, and the generator produces the CSS box-shadow you can copy straight into your stylesheet.

How to use neumorphism well

The effect relies on the element and its background being the same or a very similar color, so the shadows do the work. It looks best for cards, buttons, and toggles on a solid, muted background.

Use it sparingly: low contrast can hurt accessibility, so make sure interactive elements remain clearly visible and pass color-contrast checks. Copy the generated code and tweak the two shadow colors to match your theme.

Frequently asked questions

What is neumorphism in CSS?
A soft-UI style that uses two box-shadows (one light, one dark) so an element looks gently extruded from a matching background.
Does neumorphism have accessibility issues?
It can. The low contrast makes elements harder to see, so use it carefully and verify interactive controls remain clearly distinguishable.
How do I copy the generated CSS?
Adjust the controls to taste and copy the box-shadow code shown by the generator into your stylesheet.
Does it work in all browsers?
Yes. It uses standard CSS box-shadow, which is supported in all modern browsers.