CSS neumorphism generator

Neumorphism, or soft UI, makes elements look as if they are extruded from or pressed into the background, using two shadows: a light one on one side and a dark one on the other. This generator calculates matching shadow colours from your background and lets you tune the effect visually.

How to use it

1. Choose the background colour. The element must use the same colour.
2. Adjust size, distance, blur and intensity.
3. Pick the shape: flat, concave, convex or pressed.
4. Copy the CSS.

Example output

.soft {
  border-radius: 24px;
  background: #e0e5ec;
  box-shadow: 9px 9px 16px #a3b1c6,
             -9px -9px 16px #ffffff;
}

The pressed variant uses the same shadows with the inset keyword, which is useful for toggled or active states.

How it works

The dark shadow is the background colour darkened by the intensity amount and offset towards the bottom right. The light shadow is the background lightened and offset towards the top left, suggesting a light source from the top left.

Accessibility caveats

Neumorphism is visually appealing but has well-known usability problems:

• Element boundaries are defined only by subtle shadows, so contrast against the background is very low and often fails the WCAG 3:1 requirement for UI components.
• It can be hard to tell which elements are buttons.
• Pressed and unpressed states can look similar.

Use it for decorative surfaces and cards, add clear text labels and icons, and give interactive elements a visible focus outline and stronger state changes.