CSS Neumorphism Generator Guide: Soft UI Shadows (2026)

.neuro {
  background: #e0e5ec;
  border-radius: 20px;
  box-shadow:
    8px 8px 16px #b8bec7,
    -8px -8px 16px #ffffff;
}

Three ingredients:

1. Background matches parent — Element and surrounding area share the same color.
2. Dark shadow on one side — Usually bottom-right.
3. Light shadow on opposite side — Usually top-left, in white.

Extruded (popping out)

box-shadow: 8px 8px 16px #b8bec7, -8px -8px 16px #ffffff;

Inset (pressed in)

box-shadow: inset 8px 8px 16px #b8bec7, inset -8px -8px 16px #ffffff;

Use extruded for buttons and cards; use inset for input fields and "pressed" button states.

The dark and light shadows must derive from the background color:

• Dark shadow — Background color minus ~10% lightness.
• Light shadow — Background color plus ~10% lightness (or pure white if BG is light gray).

For background #e0e5ec:

• Dark: #b8bec7
• Light: #ffffff

If you pick arbitrary colors, the effect breaks — it must look like the same surface deformed.

Mitigations:

• Add a visible border or icon for interactive elements.
• Use stronger colors for text inside neumorphic buttons.
• Ensure focus states are highly visible (outline, not just shadow change).
• Provide a "high contrast" theme alternative.

Don't use neumorphism for critical actions or financial UIs.

Good fit:

• Personal portfolios, dribbble shots
• Music or meditation apps where softness matches mood
• Showcasing a single hero element

Avoid:

• Data-heavy dashboards
• Forms with many input fields
• Anything needing strong visual hierarchy