Neumorphism Generator
background: #e6e2db;
border-radius: 22px;
box-shadow: 9px 9px 18px rgb(0 0 0 / 0.35), -9px -9px 18px rgb(255 255 255 / 0.7);The neumorphism generator produces the soft-UI look: an element in exactly the same colour as its background, given form by two opposing shadows, a dark one below right and a light one above left. It also produces the pressed variant, where both shadows move inside the element.
How it works
The effect requires the element and its background to be the same colour. That is what makes it look extruded from the surface rather than placed on top of it, and it is also the reason the style has an accessibility problem, since the only thing separating control from background is a soft shadow.
box-shadow: [inset] d d 2d rgba(0,0,0,i/2), [inset] -d -d 2d rgba(255,255,255,i);
- d
- the shadow distance; blur is always twice the distance
- i
- shadow intensity, with the dark shadow at half the light one so the result does not look sooty
- inset
- present only in the pressed variant, moving both shadows inside the element
The style needs a mid-tone surface. On pure white there is no room for a lighter highlight, and on pure black no room for a darker shadow, so both collapse.
Examples
A raised panel
Distance
9px
Intensity
70%
Radius
22px
Style
Raised
Result
background: #e6e2db; border-radius: 22px; box-shadow: 9px 9px 18px rgb(0 0 0 / 0.35), -9px -9px 18px rgb(255 255 255 / 0.7);
The two shadows are equal and opposite, implying a single light source at the top left. Blur is twice the distance, which is what keeps the edge soft rather than embossed.
A pressed state
Style
Pressed (inset)
Distance
9px
Result
box-shadow: inset 9px 9px 18px rgb(0 0 0 / 0.35), inset -9px -9px 18px rgb(255 255 255 / 0.7);
Adding inset to both shadows flips the illusion, so the surface reads as pushed in. Pairing raised as the resting state with pressed on :active is the usual application.
Frequently asked questions
Why does neumorphism fail accessibility checks?
Because WCAG 1.4.11 requires a 3:1 contrast ratio between an interactive control and its surroundings, and a neumorphic control is by definition the same colour as its background. The soft shadow provides no measurable contrast. Adding a visible border or an accent-coloured label is the usual remedy, at which point it stops looking neumorphic.
Why does the effect disappear on a white background?
Because there is no colour lighter than white for the highlight. The style needs a mid-tone surface with room to go both lighter and darker, which is why almost every neumorphic design uses a light grey around #e0e0e0.
Why is the dark shadow weaker than the light one?
Because equal opacities look sooty. Halving the dark shadow keeps the perceived light source consistent while stopping the element looking dirty. The tool applies that ratio automatically.
When is neumorphism actually a reasonable choice?
For decorative, non-interactive surfaces such as panels and cards, where the contrast requirement does not apply. As soon as an element is a control that a user must find and operate, the style works against them.