Der ganze Effekt beruht auf einer Regel: Das Element und sein Elternelement müssen dieselbe Farbe haben. Zwei Schatten liegen an gegenüberliegenden Ecken, einer heller als die Fläche und einer dunkler, und die Illusion einer erhabenen oder eingedrückten Fläche entsteht ausschließlich aus diesen beiden Kanten. Geben Sie dem Elternelement eine andere Farbe, und die Schatten lesen sich nicht mehr als Licht, sondern werden zu zwei farbigen Flecken.
Heller und dunkler Schatten entstehen, indem Ihre Flächenfarbe um die eingestellte Intensität in Richtung Weiß und Schwarz verschoben wird, und die Lichtquelle vertauscht, welcher Schatten welche Ecke einnimmt. Die eingedrückte Form legt beide Schatten ins Element hinein; konkav und konvex ersetzen den flachen Hintergrund durch einen sanften Verlauf, der mit oder gegen das Licht läuft. Das erzeugte CSS enthält die Regel für das Elternelement, denn sie wegzulassen ist die häufigste Art, wie dieser Effekt scheitert.
Das Problem mit der Barrierefreiheit, klar gesagt
-
Der Kontrastwert ist die wichtige Ausgabe:
Die Kante eines neumorphen Bedienelements liegt häufig unter den 3:1, die nicht-textliche Bedienelemente erreichen sollen, und die zusammen mit dem CSS ausgegebene Zahl sagt Ihnen, wo Ihre liegt.
-
Eine weiche Kante ist ein schwaches Signal:
Wenn eine Schaltfläche allein durch einen zarten Schatten als Schaltfläche erkennbar ist, finden Menschen mit eingeschränktem Sehvermögen, an einem dunklen Bildschirm oder im Freien sie nicht. Ergänzen Sie eine Beschriftung, eine Umrandung oder einen Farbwechsel.
-
Eingedrückt und erhaben müssen sich um mehr als Tiefe unterscheiden:
Ein Schalter, dessen Zustände sich nur darin unterscheiden, in welche Richtung der Schatten fällt, ist für jeden unsichtbar, der den Schatten gar nicht sehen kann.
-
Es funktioniert nur auf einer flachen Fläche:
Über einem Bild, einem Verlauf oder einem gemusterten Hintergrund haben die beiden Schatten nichts Einheitliches, worauf sie sich beziehen könnten, und die Illusion bricht zusammen.
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.