Neumorphism Soft UI 2020

Neumorphism Soft UI 2020

Neumorphism (a portmanteau of 'new' and 'skeuomorphism') emerged as a UI design trend in late 2019, popularized by a Dribbble concept post by designer Michal Malewicz in December 2019. It achieved significant traction in 2020 and generated an intense period of community debate before fading as a dominant trend by 2021-2022.

Origins and the Dribbble Moment

Michal Malewicz's December 2019 Dribbble post showing a soft extruded interface concept was shared widely and spawned hundreds of imitations within weeks. The concept was presented as a successor to the flat design trend that had dominated since iOS 7 (2013), arguing that flat design had become too austere and that interfaces could benefit from a return to depth cues - but physical rather than photographic.

Visual Language

The defining visual characteristic is the extrusion illusion created by paired box shadows. An element appears to be raised from the background surface by casting two shadows simultaneously: a dark shadow on one side (typically lower right) and a lighter-than-background 'light shadow' (highlight) on the opposite side (typically upper left). The element's background color exactly matches the surface color, creating the impression that the element is part of the surface rather than sitting on top of it. For pressed or active states, the shadows are inverted inward, creating a concave depression effect.

Technical Implementation

Neumorphism depends on precise CSS: box-shadow: 6px 6px 12px #b8b9be, -6px -6px 12px #ffffff; on an element with the exact same background-color as its parent. The technique requires that backgrounds be light-neutral (typically light grey, #e0e5ec being the canonical example) because the illusion breaks with dark or saturated backgrounds - the dark shadow must be darker than the surface and the highlight must be lighter.

Accessibility Problems

Neumorphism's most serious practical limitation is contrast. Since the element and its background share the same color, the visual definition of UI elements depends entirely on the shadow pair. For users with low vision or viewing in bright ambient light conditions, neumorphic elements become invisible. WCAG 2.1 contrast requirements could not be met with the technique's core visual premise. This accessibility failure was the primary reason it did not graduate from a visual trend to a practical UI methodology.

Legacy

Neumorphism's influence persisted in softened shadow systems and in dark-mode variants that adapted the technique more successfully. It also fed into glassmorphism (frosted glass with blur backgrounds) as a related 2020-2021 trend.