Two shadows, one light and one dark, on a matching surface
A 120px box with 24px border-radius on surface color #E2E8F0 gets a background of rgb(226,232,240) (the same color, in RGB form) plus a dual box-shadow: 10px 10px 18px in a darker tint (rgb(176,181,187)) and -10px -10px 18px in a lighter tint (rgb(231,236,243)) -- one shadow offset toward the bottom-right, one toward the top-left.
This dual-shadow technique simulates a light source: the darker shadow (offset positively, toward bottom-right) represents where light would be blocked, while the lighter shadow (offset negatively, toward top-left) represents a highlight where light would catch an edge -- together, they create the illusion that the element is either raised from or pressed into a surface of the exact same color.
Both shadow tints are derived directly from the surface color itself, not arbitrary gray values -- the darker tint mixes the surface color toward black, and the lighter tint mixes it toward white, which is exactly why the whole effect only looks convincing when the shadow colors are close relatives of the actual background, not a generic drop shadow color.
Why neumorphism is genuinely tricky for accessibility
Light and dark tints are mixed in RGB. Contrast on the surface still needs a separate check. Neumorphism's entire visual signature -- elements the same color as their background, distinguished only by soft shadows -- creates an inherent accessibility challenge: low contrast between an element and its surface can make buttons and interactive elements hard to perceive for users with low vision, regardless of how visually elegant the shadow effect looks.
Because this effect relies entirely on subtle shading rather than a genuine color or border distinction, any text or icon placed on a neumorphic surface needs its own separate contrast check against that surface color -- the soft shadow trick doesn't substitute for real contrast between foreground content and its background.
This style also tends to look markedly different (and often much flatter or less convincing) in dark mode, since the light-source illusion depends on specific light and dark shadow tints that were calibrated for one specific surface color -- a separate light/dark mode version typically needs its own distinct shadow tint calculation.
Related CSS visual-effect and accessibility tools
Once a neumorphic element is styled, checking any text placed on it against the surface color is essential -- the Color Contrast (WCAG) Checker handles that verification.
For a different soft-UI aesthetic built from blur and transparency instead of dual shadows, the CSS Glassmorphism Generator is a related but visually distinct effect.
Frequently Asked Questions (FAQ)
Why does neumorphism use two shadows instead of one?
One darker shadow (offset toward bottom-right) simulates where light is blocked, and one lighter shadow (offset toward top-left) simulates a highlight catching an edge -- together, they create the illusion of depth on a surface that's otherwise the same flat color as its background.
Why are the shadow colors derived from the surface color instead of using plain gray or black?
Light and dark tints are mixed in RGB. Contrast on the surface still needs a separate check. Because the illusion only looks convincing when the shadows are close relatives of the actual surface color -- generic gray or black shadows would look like an ordinary drop shadow rather than the subtle, cohesive raised/pressed effect neumorphism is known for.
Is neumorphism considered accessible?
Light and dark tints are mixed in RGB. Contrast on the surface still needs a separate check. It requires extra care -- the low-contrast, same-color-as-background aesthetic can make interactive elements hard to perceive for users with low vision. Any text or icon on a neumorphic surface needs its own separate contrast check, since the soft shadows alone don't provide real contrast.
Does this same shadow calculation work well in dark mode?
Not automatically. Light and dark tints are mixed in RGB. Contrast on the surface still needs a separate check. The shadow tints are calculated specifically for the surface color you entered. A dark mode version with a different surface color typically needs its own separately calculated shadow tints to maintain the same convincing effect.
What controls how pronounced the raised or pressed effect looks?
The distance and blur values -- a larger distance pushes the two shadows further apart for a more dramatic raised look, while a larger blur softens the shadow edges for a smoother, more subtle transition between the element and its surface.
