How does the dual-shadow math work?

From your background color we compute a lightened and darkened shade by interpolating each RGB channel toward white (light) or black (dark) by the intensity percentage. The two shadows are then placed at opposite corners to simulate a top-left light source.

What's the difference between Pressed and Inset?

Both add the `inset` keyword so the shadow renders inside the element. Pressed uses the same shadow direction as the raised version (top-left light, bottom-right dark). Inset is the same — they're aliases that emphasise the concave look.

Why does my element look flat on dark backgrounds?

Neumorphism relies on subtle light/dark contrast, which works best on mid-tone backgrounds (like #e0e5ec). On pure black or white there's no room to lighten/darken, so the effect disappears. Try a mid-tone surface.

Is neumorphism accessible?

Use it for decorative surfaces, not for primary controls — the low contrast can fail WCAG. Always pair neumorphic UI with clear focus states and adequate text contrast.

Does the output include -webkit prefixes?

No prefix is needed — box-shadow has been unprefixed in all modern browsers for years. The CSS works as-is on Chrome, Safari, Firefox and Edge.

Neumorphism Generator

Design soft dual-shadow neumorphic elements — copy CSS instantly.

100% private — no uploads Design & CSS ToolsFree & unlimited Read tutorial

See how it works

Watch a quick simulation of this tool in action — no file needed.

How to use Neumorphism Generator

Follow these steps — everything happens instantly in your browser.

1
Step 1. Pick a background color — the element should share it for the softest look.
2
Step 2. Set size, radius, distance and blur with the sliders.
3
Step 3. Tune intensity to control how light/dark the two shadows get.
4
Step 4. Switch shape between Flat (raised), Pressed (inset) or Inset (concave).
5
Step 5. Copy the generated CSS into your stylesheet.