It grows from the surface
Every element — button, card, slider, knob — has the exact same background color as the page. The shadows are what make it visible. Take them away and it disappears. That's the whole trick.
Property1 surface color
The tactile design style
Design that feels like something.
Neumorphism makes interfaces feel physical. Elements appear to grow right out of the background — raised when idle, pressed when active, like soft clay or polished plastic under diffuse light.
One skill file. Every component. Tell Claude to build in neumorphism style and watch it follow every rule.
12+Components
3Surface states
1Light source
Live mix · session 01
73%
What makes it tick
Three ideas, one effect.
Neumorphism isn't a collection of decorative tricks — it's one physical metaphor applied consistently. Every element either sticks out of the surface or presses into it.
Light always comes from one place
Top-left, always. A light shadow falls toward the light source (upper-left), a darker shadow falls away from it (lower-right). Every element in the interface shares this light direction — that's what makes it feel coherent.
Direction↖ Top-left
Three states, used on purpose
Raised means "I'm interactive, tap me." Inset means "I'm active or I hold something." Flat means "I'm informational." Every element picks a state and keeps it — mixing them randomly breaks the illusion immediately.
States3 · used intentionally
Where it shines
Four canonical use cases
Made for interfaces that need to feel premium.
Neumorphism works best when you want users to feel like they're touching something real — not just looking at a screen.
01
Control panels & dashboards
Knobs, sliders, toggles, and meters all feel immediately physical in neumorphism. Think audio mixing boards, smart home controls, or any UI where tactile feedback matters.
02
Music & audio app interfaces
Equalizers, volume controls, effect pads, and playback buttons that look like they belong on real hardware. Neumorphism is the closest CSS gets to a physical dial.
03
Wearable & IoT companion apps
Device companion apps, smartwatch configurators, and sensor dashboards where the interface needs to echo the physical device it controls.
04
Settings & preferences screens
Inset fields and raised toggles naturally communicate "this is where you configure things." The material metaphor maps perfectly to a settings panel mindset.
Components
Live
Every interaction has a physical counterpart.
All of these are fully interactive. Click the button. Drag the slider. Turn the knob. This is real CSS — not a mockup.
Knob · Draggable dial
VOL
60
Volume
Click and drag up/down to rotate. Concentric raised + inset rings give the analog feel.
Button · Raised → Pressed
×2
Press and hold to feel the shadow invert. Primary CTA breaks the soft monochrome on purpose.
Input · Always inset
FOCUS
Inset shadow signals "this holds data." Focus adds an accent ring.
Toggle · Active state
ON/OFF
Dark mode
Inset track, raised thumb that turns accent when active.
Progress · Accent fill
2 BARS
Storage73%
Memory48%
Slider · Accent fill
42
Press the thumb and watch it sink into the track.
Know the limits
When to leave it on the shelf.
Neumorphism is powerful in the right context and quietly wrong in others. Three situations where it breaks down:
×
Content-heavy reading interfaces
Neumorphism's low-contrast approach is beautiful at a glance but hard on the eyes for long reading sessions. News sites, documentation, email — pick a higher-contrast style instead.
×
White or brightly colored backgrounds
The illusion requires a mid-gray surface (#e0e5ec is the canonical tone). On pure white or saturated colors, the shadows either vanish or look muddy and wrong. No background, no neumorphism.
×
Using "raised" for everything
Neumorphism only communicates meaning through states. If every element is raised, nothing stands out — the material metaphor collapses and you're left with a confusing gray soup. Use inset for active, flat for informational, raised for interactive.