The whole effect rests on one rule
The element and its parent must be the same colour.
Neumorphism works by placing two shadows on opposite corners — one lighter than the surface, one darker — so the element appears extruded from the background rather than floating above it. Shift the parent to a different colour and the shadows stop reading as light and become two coloured smudges.
That is why the [msm_tool slug="neumorphism-generator"] emits the parent rule alongside the element rule. Omitting it is the commonest way the effect fails when pasted into a real page.
The accessibility problem, stated plainly
This is not a caveat to mention in passing. It is the defining constraint of the style.
Interface elements that convey meaning — buttons, inputs, borders, focus rings — are expected to meet a contrast ratio of 3:1 against what surrounds them. A neumorphic edge is a soft shadow against a surface of the same colour, and it routinely falls well below that. Which is to say: for a proportion of your users, the button is not visibly a button.
The generator prints the contrast figure with the CSS for exactly this reason. If it reads below 3:1, the control does not meet the bar, and no amount of adjusting the light source will change that — the shadows are the whole design.
What actually fails
- Low vision. A faint edge is the first thing to disappear.
- Bright environments. Outdoors on a phone, subtle shadows vanish entirely. The screen is at its brightest and the contrast between surface and shadow is the first casualty.
- Poor displays. Cheap panels and older screens crush the near-identical greys the effect depends on.
- State changes. A toggle whose only difference between on and off is which way the shadow falls is invisible to anyone who cannot see the shadow at all.
Using it without failing people
The style is not unusable. It is unusable as the only signal. Three things make it survivable:
- Add a second cue to every control. A label, an icon, a border, a colour change on hover and focus. If the shadow were removed entirely, could someone still tell this is a button and what state it is in? If not, the design depends on something a lot of people cannot see.
- Keep a real focus ring. Neumorphic designs frequently remove outlines because they interrupt the soft aesthetic. A keyboard user with no visible focus indicator cannot use the page at all. Use
:focus-visible and give it genuine contrast.
- Use it for surfaces, not controls. Cards, panels and containers can carry the style safely, because nothing depends on the user identifying them as interactive. Reserve conventional styling for the buttons and inputs.
Pressed, concave and convex
The pressed shape moves both shadows inside the element with the inset keyword, which is how a recessed control is drawn. Concave and convex replace the flat background with a shallow gradient running against or with the light — the face appears to dish inward or bulge outward.
The same rule applies to all of them: pair the depth change with something else. A pressed state that differs only in shadow direction is a state change many users will not perceive.
It only works on a flat surface
Over an image, a gradient or a patterned background, the two shadows have nothing consistent to sit against and the illusion collapses. Neumorphism is a style for plain single-colour pages, which is part of why it tends to arrive as a whole-site aesthetic rather than a component choice.
An honest summary
Neumorphism looked new in 2020 and has aged into something more like a specimen. It is pleasant on a dribbble shot and difficult in production, for a reason that is structural rather than fashionable: the effect works by minimising contrast, and interfaces work by having enough of it.
If you want the softness without the cost, a very subtle conventional shadow on a light card gives most of the feel with an edge people can actually see.