Neumorphism (also called soft UI) is a web design style where buttons, cards, and controls look molded from the page itself, pushed out of or pressed into one continuous surface. It builds depth with paired shadows, a pale highlight on one side and a soft dark shadow on the other, instead of borders or floating white cards. The result feels physical and calm, like the silicone buttons on a well-made remote. Everything looks pressable, and pressing it is satisfying.
It exists because flat design overcorrected. When skeuomorphism fell out of fashion, interfaces lost their sense of touch along with their textures, and a whole generation of buttons stopped looking like buttons. Neumorphism restores the physics without the costume. Done well it reads as calm, expensive, and quietly playful. Done lazily it goes mushy, which is why the rules below carry more weight here than in most styles.
Where it came from
Neumorphism is young. The look surfaced around 2019 on Dribbble, where a wave of concept shots for banking apps, music players, and smart-home dashboards showed interfaces that seemed injection-molded from a single pale surface. The name, a blend of "new" and "skeuomorphism", stuck almost immediately, and "soft UI" travels as its plainer alias. There is no founding manifesto and no famous studio behind it; the style spread shot by shot, because designers kept wanting to press the screenshots.
The context explains the appetite. Early smartphone interfaces were heavily skeuomorphic, all stitched leather and glass shelves, until Apple's iOS 7 flattened everything in 2013 and flat design ran the following decade. Flat is efficient, but it costs affordance: a flat button gives no hint that it wants to be tapped. Neumorphism is the correction, keeping flat design's cleanliness while borrowing just enough physicality that controls read as touchable again. It sits between the two schools and takes the best trait from each.
The six rules that make it work
One surface, two shadows
Every element is lit from the same corner: a pale highlight on one side, a soft shadow on the other. That pair replaces borders entirely.
The background is the material
Cards and buttons share the page's exact background color. Nothing sits on white; everything is carved from one continuous surface.
Corners stay pillowy
Large radii on cards, buttons, sliders, and inputs. One sharp corner breaks the molded-from-one-piece illusion instantly.
Raised is idle, pressed is active
Outset shadows mean resting, inset shadows mean pressed or on. The style's whole interaction language lives in that flip.
Color arrives in small doses
The base stays muted and tinted. Saturated gradients are reserved for the primary action and live data, so color always means something.
Contrast does the heavy lifting
Soft shadows are quiet signals. Text stays dark, targets stay big, and important states get a second cue beyond shadow alone.
When to pick it, when to skip it
Pick it if
- You're launching an app, dashboard, or SaaS product and the interface itself is the pitch.
- Your product is tactile in real life: audio gear, wearables, smart-home devices, appliances.
- You want calm and premium without going stark. Fintech and health tools sit well here.
- Your site is control-shaped: toggles, sliders, players, and settings people actually touch.
Skip it if
- Your site is mostly long-form reading. Dense text wants stronger structure, and that job belongs to Editorial Design.
- You need to be heard from across the room. Loud is Neobrutalism's job.
- Your brand runs on hard grids and stark contrast. That temperament belongs to Swiss Style.
- Photography carries your sell. Soft carved chrome competes with imagery; a photo-first style serves a big catalog better.
How we build it
Every neumorphic site we ship is built from scratch, no templates and no page builders, because this style is really a lighting system, and lighting has to be tuned. The exact surface tint, the angle of the highlight, the depth of a press, the way a toggle travels from out to in: prefab blocks get those wrong in ways you feel before you can name them. We set the light once, matched to your brand's temperature, then carve every component from it.
The demo at the top of this page is exactly that: an original homepage we designed and coded ourselves, so you can press the buttons instead of reading about them. Flip it to dark and watch the same light get re-carved. If you want to see how it compares with louder or leaner directions, the full catalog puts your business name inside all 20 styles at once.
Questions we actually get
How is neumorphism different from skeuomorphism?
Skeuomorphism imitates real objects literally: leather textures, stitched edges, glass reflections. Neumorphism keeps only the physics, one light source and soft depth, and applies it to clean modern components. You get the tactile feel without the costume.
What fonts and colors work for it?
Rounded geometric sans faces fit the molded look. This page and the demo use Plus Jakarta Sans; Nunito, Manrope, and Sora also work well. For color, start from a softly tinted neutral base, then reserve one or two saturated gradients for primary buttons and live data so color always means something.
Can it work with our existing brand?
Yes. The surface tint shifts toward your brand's temperature, and your primary color becomes the gradient that marks every important action. Because the base stays quiet, even a loud brand color reads as premium here.
How long does a build take?
Most of our custom builds go live in three to five weeks, and neumorphism is no exception. The shadow system gets decided once, early in design, and then applies consistently across every component.