Neumorphism Generator
Build soft-UI shadows visually and copy the CSS, with a contrast warning.
Beautiful, And Worth Reading The Warning About
Neumorphism describes a shape using nothing but light. The element and its background are exactly the same colour; a pale shadow on one side and a dark one on the other make it appear raised or pressed. Done well it is genuinely lovely.
It also has a real accessibility problem, and it is worth stating plainly rather than burying: there is no edge, no border and no colour change, so the only thing distinguishing a button from the background is a soft gradient. On a dim screen, in sunlight, or for anyone with reduced contrast sensitivity, it can vanish. This generator measures that contrast and tells you.
Key features
- Four surface styles — raised, pressed, concave and convex, which are different shapes rather than different shadows.
- Light direction — all four corners, since the shadow pair has to agree with the rest of your interface.
- Live preview on the real surface colour — the effect is meaningless against any other background.
- Measured contrast warning — the actual ratio between the shadow and the surface, not a generic caution.
- Clean CSS output — a single box-shadow pair, ready to paste.
This tool runs entirely inside your browser using native Web APIs. Your files and text are never uploaded to a server, never logged and never shared with third parties.
How to use: Neumorphism Generator
- Pick the surface colour
The element and its background must match — that is the whole technique. - Set distance and blur
Distance moves the shadows apart; blur softens them. Keep them roughly proportional. - Choose a style
Raised for buttons at rest, pressed for their active state. - Read the contrast note, then copy
If the ratio is low, raise the contrast slider or add a real border.
Technical specifications
| Processing location | Entirely in your browser — no server round trip |
|---|---|
| Data uploaded | None. Files and text never leave your device |
| Price | Free — no account, no trial, no usage cap |
| Category | Design |
| Works offline | Yes, once the page has loaded |
| Browser support | Chrome 90+, Edge 90+, Firefox 90+, Safari 15+ |
| Interface languages | English, 中文, हिन्दी, Español, العربية |
Frequently asked questions
Why does it look wrong on my site?
Almost always because the element and its parent are not exactly the same colour. Neumorphism depends on them matching precisely — a difference of a few percent turns the effect into an odd-looking box. Copy the surface colour into your background as well as your element.
Is neumorphism accessible?
Not by default, and it is worth being honest about it. WCAG asks for a 3:1 contrast ratio between an interactive component and its surroundings, and a soft shadow on a same-colour surface frequently falls short. The warning here shows the real number. Use it for decorative surfaces, and give anything clickable a border, an icon or a label as well.
What is the difference between concave and convex?
The shadow pair is the same; the surface gradient is reversed. Convex is lighter at the top, so it reads as bulging outwards. Concave is darker at the top and reads as dished inwards. Both sit between "raised" and "pressed" and are useful for toggle states.
Does it work in dark mode?
Yes, and often better. On a dark surface the two shadows are a slightly lighter and a slightly darker grey, which is subtler and less prone to the muddy look that pale surfaces get. Set the surface colour to your dark background and the generator does the rest.
Why does the shadow look banded?
Large, low-contrast gradients are where 8-bit colour runs out of steps, and browsers do not dither them. Reducing the blur or raising the contrast a little usually clears it; so does accepting it, since it is almost invisible on a phone screen.