neumorphism generator

How to use the neumorphism generator

  1. Pick a surface color — neumorphism only works when the element blends into its parent, so start with the exact same color as the page background.
  2. Adjust distance (5-20px) and intensity (0.1-0.5) of the dual shadows. Distance controls how raised the element appears; intensity controls the shadow strength.
  3. Toggle shape variants: flat (subtle depth), concave (pressed into the surface), convex (bulging out), pressed (active state).
  4. The tool warns you when shadows aren't perceptible — a common mistake on pure white or pure black backgrounds.
  5. Copy the CSS — the output is a single box-shadow rule with two shadows (one light, one dark).

When to use it

Neumorphism shines on uniform, soft-color backgrounds (light greys, warm creams). It creates tactile UI that feels physical — useful for controls, calculator keys, and dashboard cards. Avoid it for primary CTAs; the subtle depth hurts click affordance compared to a colored button. Avoid it entirely on pure white or pure black, where the shadows can't be seen. Alternative: neumorphism.io covers the same parameters but lacks accessibility warnings and the concave/convex variants.

Example

.neu-card {
  background: #e0e5ec;
  border-radius: 1rem;
  box-shadow:
    8px 8px 16px rgba(163, 177, 198, 0.6),
   -8px -8px 16px rgba(255, 255, 255, 0.8);
  padding: 2rem;
}

/* Pressed state on click */
.neu-card:active {
  box-shadow:
    inset 4px 4px 8px rgba(163, 177, 198, 0.6),
    inset -4px -4px 8px rgba(255, 255, 255, 0.8);
}

Frequently asked questions

Why don't my shadows show up?
Your background is probably too light (near white) or too dark (near black). Neumorphism needs a mid-tone surface so both the light shadow (typically white) and dark shadow (a blue-grey) can be seen.
Is neumorphism accessible?
It struggles. Low contrast between the element and its background is the whole point of the style, which means buttons don't have clear click affordance for low-vision users. Use it for decorative cards, not for primary actions.
Can I animate the pressed state?
Yes — transition box-shadow over 150-200ms to get a tactile click feel. Pair with a slight transform: scale(0.98) for extra feedback.
Why does my neumorphism look washed out?
The intensity is probably too low. Try increasing from 0.2 to 0.4, and verify your surface color isn't too close to the shadow colors (should contrast subtly with both).
Is this still popular?
Peak neumorphism was 2020. It's a niche aesthetic now but still great for controls, toggles, and app-like interfaces. Don't build a whole site in it.

Related generators

Last updated: 2026-04-23