CSS Neumorphism Generator

How to use the css neumorphism generator

1. Adjust the controls and watch the preview update.
2. Read the generated CSS below the controls.
3. Copy it into your stylesheet.

About this tool

Neumorphism is one trick: two box-shadows on the same background colour, one lighter and one darker, offset in opposite directions. That is why the element and its container must share a colour — the effect is the surface deforming, not an object sitting on top of it.

The two shadow colours are derived here from the background rather than picked separately, because picking them independently is what makes most neumorphic attempts look wrong.

It is worth being honest about the cost: the style has an accessibility problem it never solved. Controls are distinguished only by soft shading, giving very low contrast at their edges, so buttons can be genuinely hard to identify. Use it for decoration rather than for anything a user must find.

Common uses

• A soft-UI card or toggle in a personal project.
• Reproducing the pressed-versus-raised pair of states.
• Learning why the effect needs a matching background.

Frequently asked questions

Why does the effect disappear on a white page?

The element must be the same colour as what is behind it. On a different background it reads as a floating box rather than a moulded surface.

How do I make it look pressed?

Switch both shadows to inset. The generator has a toggle for it, and it is exactly the same two shadows reversed.

Is neumorphism accessible?

Often not. Controls are indicated only by faint shading, so edges have very low contrast. Avoid it for essential controls, or add a border.