Neumorphism

Applying a Neumorphism visual direction

You are being asked to apply a Neumorphism visual direction to a web interface. This document gives you framing and recommendations for that direction. It does not tell you what page, product, or feature to build — apply the guidance below to whatever interface you are already working on, at whatever scope that work requires.

What “Neumorphism” means here

Neumorphism makes every element look pushed out of, or pressed into, one continuous surface. A button is not a colored shape placed on a background; it is the same material as the background, extruded. That illusion is produced by a pair of shadows — a pale one on the side the light comes from, a dark one opposite — with the element and its surroundings sharing exactly the same fill color. Nothing has a border. Depth is the only thing distinguishing one region from another.

That is also the danger, and you should treat it as the central design problem rather than an afterthought. If depth is the only signal, then anyone who cannot resolve a subtle two-tone shadow — on a dim screen, in sunlight, with low vision — cannot find the controls at all. Neumorphic work published without addressing this is genuinely unusable for some of its readers, and it is by far the most common outcome.

The resolution is not to abandon the style. It is to keep the extruded surfaces while making sure that every control, and all text, still meets ordinary contrast thresholds through something other than the shadow: the label, the icon, or a fill shift. Get that right and the direction is pleasant and distinctive. Skip it and the result is decorative and broken.

Recommendations

• Choose a background in the middle of the luminance range. Neumorphism does not exist on white or black, because there is no room for a shadow lighter than the surface or darker than it.
• Give the element and its container the same fill. If the button is a different color from what it sits on, you are building a card, not an extrusion.
• Use two shadows per surface, offset in opposite directions: one lighter than the background, one darker. Keep the light direction identical everywhere on the page, or the surface stops reading as continuous.
• Drop borders entirely. A border immediately reads as a separate object laid on top and destroys the effect.
• Build a genuine pressed state using an inset shadow, and make sure the resting state is not inset. Raised and recessed are the style’s only two states, so both need to exist and differ clearly.
• Verify text and control affordances against the background directly, ignoring the shadows. Shadows are too soft and too local to count as contrast.
• Where a control cannot reach the required contrast through shadow alone — which is most of them — give it a text label, a high-contrast icon, or a slight fill shift. That addition is part of the style done properly, not a compromise of it.

Avoid

• White or black backgrounds, where one of the two shadows becomes invisible.
• Elements filled with a different color from their container.
• Borders, outlines, or hard edges of any kind.
• Multiple light directions across the same page.
• Relying on the shadow alone to indicate that something is interactive.
• Fine or small text on the surface, which the low ambient contrast makes disproportionately hard to read.
• Nesting extruded surfaces inside extruded surfaces more than one level deep; the illusion stops resolving.

How to check your own work

Before considering the result finished, look at it and ask:

• Are the element and its background the same color? If not, this is a card with soft shadows, not neumorphism.
• Do all the light shadows fall on the same side across the whole page?
• Turn the shadows off entirely, in your head or in the inspector. Can you still tell what is a control and what is not? If the answer is no, add a label, an icon, or a fill shift until the answer is yes.
• Look at the screen at reduced brightness or from an angle. Do the controls disappear? That is what a real portion of your readers will experience permanently.
• Is there a visible difference between a resting element and a pressed one? If both look raised, the interaction model is missing.

Neumorphism — Specification

Definition

Neumorphism is a web-interface design style in which elements appear extruded from, or pressed into, a single continuous surface. The element and its container share one fill color, and separation is produced entirely by a pair of opposing shadows — one lighter than the surface, one darker — with no borders present. Because depth is the sole visual separator, the style is only shippable when contrast requirements are satisfied independently of the shadows.

Core principles

• One continuous material. Elements are not placed on the surface; they are formed from it.
• Paired opposing shadows. A light and a dark shadow, offset in opposite directions, produce the extrusion.
• A single light source. One consistent light direction across the page keeps the surface reading as continuous.
• Two states only. Raised and recessed are the style’s vocabulary, and both must be visibly present.
• Depth is not contrast. Legibility and control discoverability are established by something other than the shadow.

Visual characteristics

• A mid-luminance solid background, never white or black.
• Controls and panels filled with exactly the background color.
• Two shadows per surface: one pale, one dark, offset oppositely.
• No borders, outlines, or hard edges anywhere.
• Inset shadows expressing pressed or selected states.
• Generous rounding, which strengthens the impression of moulded material.

Rules

1. Shared fill. Elements and their container use the same color. Acceptance criterion: The computed background-color of each control differs from its containing surface by 3% or less in relative luminance.

2. Paired opposing shadows. Extrusion is produced by exactly two shadows. Acceptance criterion: Each neumorphic surface has a box-shadow containing exactly two shadows whose offsets are opposite in sign, one lighter and one darker than the background color.

3. No borders. Separation never uses an edge. Acceptance criterion: Computed border-width is 0 on every neumorphic surface.

4. Mid-luminance ground. The background leaves room for both shadows. Acceptance criterion: The page background is a solid color with a relative luminance between 0.15 and 0.85.

5. Single light direction. The surface reads as continuous. Acceptance criterion: Every light shadow on the page shares the same sign of offset on both axes.

6. Raised and recessed both exist. The interaction model is expressed spatially. Acceptance criterion: The pressed or selected state uses an inset shadow while the resting state does not, and both states are present in the interface.

7. Contrast independent of relief. Legibility does not depend on the shadow. Acceptance criterion: All text measures at least 4.5:1 and every essential control boundary or indicator measures at least 3:1 against the background, with shadows excluded from the measurement.

Avoid

• White or black backgrounds, which eliminate one of the two shadows.
• Elements filled differently from their container.
• Borders, outlines, or hard edges used to reinforce separation.
• More than one light direction on a page.
• Shadow alone signalling that an element is interactive.
• Small or fine text, which the low ambient contrast makes disproportionately hard to read.
• Extruded surfaces nested more than one level deep.

Acceptance criteria

• Rule 1: Controls and their containers differ by 3% or less in luminance.
• Rule 2: Every surface has exactly two opposing shadows, one lighter and one darker.
• Rule 3: No neumorphic surface has a border.
• Rule 4: The page background luminance falls between 0.15 and 0.85.
• Rule 5: All light shadows share one offset direction.
• Rule 6: Pressed states use inset shadows and resting states do not.
• Rule 7: Text meets 4.5:1 and control indicators meet 3:1 excluding shadows.

Blocking failures

• A control’s only indication that it is interactive is its shadow, measured below 3:1, leaving it undiscoverable for readers who cannot resolve soft two-tone depth. This is the defining failure of the style and the reason Rule 7 exists.
• Text falls below 4.5:1 against the surface, which the low ambient contrast of the style makes easy to miss and impossible to compensate for with relief.
• No pressed state exists, so activation is unconfirmed and the style’s only interaction affordance is absent.

These conditions make the work unacceptable to ship; they are not stylistic suggestions and are not subject to designer discretion.

Responsive adaptation guidance

• Shadow offset and blur may scale down proportionally at narrower viewports, but both shadows remain present; dropping to a single shadow flattens the surface and ends the style.
• Rule 7 is re-verified at every breakpoint and at increased text scaling, since smaller rendered text on a low-contrast surface is where the style fails first.
• Rounding may reduce at narrow widths without affecting any rule.
• The shared-fill (Rule 1), border-free (Rule 3), and single-light-direction (Rule 5) rules hold unchanged at every breakpoint.
• Where a narrow viewport forces controls close together, spacing is increased rather than adding separators, since a separator line would violate Rule 3.