What is Neumorphism web design?

The name blends "new" and "skeuomorphism". The look surfaced in late 2019 through concept shots on Dribbble - mobile banking apps, smart-home panels, music players - and spread as a reaction to the flat, high-contrast interfaces of the previous decade. It borrows one idea from skeuomorphism, interface elements as physical objects with volume, and drops the rest: no textures, no leather or brushed metal, only light and shadow on one uniform surface.

The mechanic is simple and strict. Every element shares the background color; a light shadow falls to the top-left and a dark shadow to the bottom-right, so a raised element looks extruded from the surface. Turn the same shadows inward (inset) and the element looks pressed into it - which is how active buttons, toggle tracks, sliders and progress bars are drawn. With no borders and no color fills, hierarchy comes entirely from what is raised and what is pressed.

It is also a well-known cautionary example among UI trends. Soft shadows on a same-color surface give low contrast between an element and its background, so buttons, states and boundaries can be hard to see for many users, and on a dark background the shadow pair has to be recalculated rather than simply inverted. That is why the style rarely dresses a whole product today and shows up in focused places - a dial, a toggle group, a smart-home or wellness widget, a music or timer control - where the tactile feel is the point.

Key visual characteristics

• Every element is molded from the same color as the background, so surfaces are separated only by shadow, never by a border or a contrasting fill
• A paired shadow - light on the top-left, dark on the bottom-right - that makes raised elements look extruded from the surface
• Inset (pressed-in) shadows for the opposite state: active buttons, toggle tracks, sliders, progress tracks and input fields
• Generous, consistent corner radii - circles for dials and knobs, softly rounded rectangles for cards and buttons
• Controls that imitate physical objects: circular dials with tick marks, knobs riding a track, switches, segmented groups with one pressed segment
• Restrained ornament - no textures, illustrations or busy gradients competing with the light-and-shadow effect

Color characteristics

• A single neutral base, usually a light cool grey or off-white, used for the background and for every surface
• Shadow colors derived from that base rather than picked separately: a lighter tint for the highlight and a darker shade for the shadow, so the pair adapts to any background
• One accent color, used sparingly on the active state - a filled progress arc, an "on" indicator, a primary button - so color marks what is live while the surface stays neutral

Typography

• A clean geometric or neo-grotesque sans-serif in medium to bold weights, because soft surfaces need text that stays crisp
• Text set in a dark, slightly cool neutral rather than pure black, with a muted secondary tone for labels and metadata
• Small uppercase, letter-spaced micro-labels for section kickers and slider scales, echoing the engraved labels on hardware

UI patterns

• A circular dial or gauge with a raised outer ring, a pressed inner track and a colored progress arc as the hero element
• A segmented control where every option is raised and the selected one is pressed in
• Rows of settings, each with an icon in a pressed well and a switch built from an inset track and a raised knob
• Cards that are raised as a whole, with inset tracks inside them for progress bars and sliders

Choosing a style for your project? Read the visual guide to web design styles · Explore Styles guide