Neumorphism Generator

Create soft UI (neumorphic) effects with light and dark shadows. Customize shape, distance, blur, and intensity.

How it works: Choose a background color and adjust shadow distance, blur, and intensity. Select a shape type to see different neumorphic effects. Copy the CSS when ready.

#e0e0e0
Shape
5px
10px
50%
16px
200px
border-radius: 16px;
background: #e0e0e0;
box-shadow: 5px 5px 10px #9d9d9d,
-5px -5px 10px #e9e9e9;

What is Neumorphism?

Neumorphism (new + skeuomorphism) is a design style that creates soft, extruded shapes using carefully crafted shadows. Elements appear to push out of or press into the background surface. It combines flat design with realistic shadow effects, using two shadows — one light and one dark — on a matching background color.

How Neumorphic Shadows Work

The effect requires two box-shadows: a light shadow (offset top-left) and a dark shadow (offset bottom-right). Both shadows are derived from the background color — one lighter, one darker. The element and its parent must share the same background color for the illusion to work. Adjust distance and blur to control the depth perception.

Neumorphism Shape Types

Flat creates a raised button look with external shadows. Concave makes the surface appear curved inward using a subtle gradient. Convex creates a rounded, raised appearance. Pressed simulates a pushed-in button using inset shadows. Each shape type generates different CSS for the desired visual effect.

Neumorphism Design Tips

  • Always use a neutral background color — pure white or very saturated colors break the effect
  • Keep shadow distances proportional to blur — typically 1:2 ratio
  • Use subtle intensity to avoid harsh shadows
  • Ensure sufficient contrast for text and interactive elements
  • Neumorphism works best for cards, buttons, and toggles
  • Consider accessibility — the soft edges can be hard to distinguish for some users