Neumorphism Generator
How neumorphism is built
Neumorphism makes an element look moulded out of its own background, using two box-shadow layers: a light one where the imaginary light falls and a dark one opposite. The element and its parent must share a colour, which is the rule that makes or breaks the effect.
Syntax
box-shadow: <x> <y> <blur> <dark-tint>, -<x> -<y> <blur> <light-tint>;| Part | What it controls |
|---|---|
| two opposing shadows | Identical offsets with opposite signs. One plays the shadow, the other the highlight. |
| tinted, not black and white | Both colours are the background darkened and lightened. Pure black and white read as grey scum over the surface. |
| matching background | The element's background must equal its parent's, or the shape stops looking extruded and starts looking like a floating card. |
| inset | Adding inset to both shadows flips the surface from raised to pressed, which is how the active state of a neumorphic button is built. |
| distance and blur | Blur is usually about twice the offset. Equal values look hard; far more blur flattens the effect to nothing. |
Notes from practice
It needs a mid-tone background
The effect depends on being able to go both lighter and darker than the surface. On pure white or near-black one of the two shadows has nowhere to go and the shape looks lopsided.
Contrast is the known weakness
Neumorphic controls have almost no edge contrast, so they fail accessibility checks and read poorly to anyone with low vision. Keep real borders and focus states on anything interactive.
Keep one light direction per screen
Every raised element should be lit from the same corner. Mixing directions breaks the illusion instantly, and it is the usual giveaway of a copy-pasted snippet.
Neumorphism Generator FAQ
How do I create a neumorphism effect in CSS?
Give the element the same background colour as its parent, then apply two box-shadows with opposite offsets: one darker than the background on the side away from the light, one lighter towards it. For example box-shadow: 8px 8px 16px #c8ccd4, -8px -8px 16px #ffffff on a #e0e5ec surface.
Why does my neumorphism look flat or dirty?
Usually because the shadows are black and white rather than tinted versions of the background, or because the element's background does not match its parent's. Both break the illusion that the shape is moulded out of the surface.
How do I make a pressed or inset neumorphic button?
Add the inset keyword to both shadows. The highlight and shadow swap sides visually and the surface reads as pushed in, which is the natural :active state for a raised neumorphic button.
Is neumorphism accessible?
On its own, no. The style relies on very low contrast between an element and its background, which fails WCAG contrast requirements for interface components. If you use it, add a visible border or an obvious focus ring to anything clickable.
What is the difference between neumorphism and glassmorphism?
Neumorphism sculpts an element out of a solid background with paired shadows and no transparency. Glassmorphism makes a translucent panel that blurs whatever sits behind it with backdrop-filter, so it needs a photo or gradient underneath to work at all.
Related generators
- Box Shadow — Stack up to three shadow layers, mix inset and outer shadows, and tune colour and opacity.
- Glassmorphism — Frosted glass with backdrop-filter. Blur and saturation act on whatever sits behind the card.
- Border Radius — Round each corner on its own, or switch to elliptical radii for organic blob shapes.
- Form Controls & Scrollbars — accent-color, caret-color, color-scheme, ::selection, ::placeholder, scrollbar styling and textarea behaviour.
Part of CSSGen.dev — 30 free visual CSS generators with browser support built in.