STATE 01
Matching surfaces
Foreground and background share one color, as if they are one material.
soft surface tutorial
Depth made
from two shadows.
Soft UI. Every surface looks pressed from - or into - the same background, sculpted entirely from light and shadow.
outset
inset
light
shadow
The page is not made of cards sitting on a background. It is one continuous surface being pushed and pressed.
STATE 02
Dual shadows
A dark shadow and white highlight fake soft depth from light alone.
STATE 03
Inset & outset
Raised elements invite touch. Inset elements feel pressed into the plane.
STATE 04
Contrast tradeoff
The calm is beautiful, but full interfaces need stronger readable states.
Soft controls,
used sparingly.
Neumorphism works best as a tactile accent for music players, smart-home panels, calculator UIs, toggles, sliders, and premium device mockups. A full product needs stronger contrast than the style naturally provides.
Music playersSmart-home dashboardsCalculator UIsPortfolio conceptsToggles & slidersDevice mockups
Other soft worlds