Neumorphism

Soft UI extruded seamlessly from its environment.

Interactive Preview

Launch Fullscreen

The Concept

Neumorphism (or Soft UI) is a visual style that blends background and component. Unlike standard Material design where cards float above a surface with a dark drop shadow, neumorphic elements share the exact same background color as the surface they sit on. They are defined entirely by two opposing shadows: one light and one dark, simulating physical extrusion.

The Experiment

We designed a fictional Smart Home Automation dashboard (AURA Home). Because neumorphism relies heavily on interactive states (pushed vs extruded) and simple toggle controls, a smart home interface with dials, sliders, and lighting switches provides the perfect context for the aesthetic.

Design Decisions

Dual Shadows

Using precise CSS box-shadow rules with a negative X/Y white shadow (light source) and a positive X/Y dark shadow (ambient occlusion) to push elements off the canvas.

Inset States

Active buttons and depressed toggles swap the drop-shadows for inset shadows, making the element appear physically pressed into the soft surface.

Low Contrast Geometry

Relying entirely on structural light-play rather than borders or background-color differences to define hit areas and component boundaries.

Design Specs & Assets

Use these core parameters to recreate the Neumorphism aesthetic in your own projects.

Color Palette

#e0e5ec (Base Canvas)

#a3b1c6 (Dark Shadow)

#ffffff (Light Shadow)

Typography

font-family: 'Inter', sans-serif; color: #4a5568;

Key CSS Snippet: The Convex Button

.neu-button {
    background-color: #e0e5ec;
    border-radius: 12px;
    box-shadow: 9px 9px 16px rgb(163,177,198,0.6), 
               -9px -9px 16px rgba(255,255,255, 0.5);
}

.neu-button:active {
    box-shadow: inset 6px 6px 10px 0 rgba(163, 177, 198, 0.7),
                inset -6px -6px 10px 0 rgba(255, 255, 255, 0.8);
}

Accessibility (a11y) Analysis

The Art vs. Access Tradeoff

The Conflict: Neumorphism is arguably the most inaccessible design trend of the modern era. Because UI elements share the exact same background color as the canvas, users with visual impairments cannot distinguish buttons from empty space without relying entirely on subtle shadow contrast.

The Compromise: Introducing subtle, higher-contrast borders on interactive elements, or providing a high-contrast toggle that flattens the shadows into solid boundaries.