← Back to Skills / Marketplace / neumorphism
SKL · 05● FREE

Neumorphism.

Buttons that push in, sliders that look like dials — a tactile, physical quality unlike anything else in digital UI.

● Live preview · Neumorphism demo
● This is real CSS, not a screenshot
↗ New tab
01 · The Vibe

Imagine if your interface was carved from a single piece of soft clay — buttons that actually look like they push in when you tap them, sliders that look like physical dials, cards that appear to gently rise out of the surface rather than sitting on top of it. That's neumorphism. It creates a tactile, physical quality that makes digital interfaces feel like objects you can touch. You've seen it in smart home apps, audio equipment controls, and premium iOS concept designs. It's a style that makes people stop and say "how does this feel so different from everything else?"

● Looks Like
Smart home control appsAudio player UIsApple Watch facesPremium calculator appsHigh-end dashboard concept designsMusic production interfaces
02 · Best For / Avoid If
＋ Best For
+Smart home and IoT dashboards
+Audio, music, and media player interfaces
+Health and fitness trackers with analog-feeling controls
+Calculator, timer, and utility apps
+Personal dashboards and tools where the UI itself is part of the experience
+Portfolio projects where you want to show design ambition
× Avoid If
×Your app has a lot of text content — the low contrast makes reading paragraphs uncomfortable
×You need dark mode — neumorphism only works on medium-gray backgrounds, not dark ones
×You have many small UI elements close together — shadows merge and the effect breaks down
×Accessibility is a priority — the subtle shadow-based contrast doesn't meet standard accessibility requirements
03 · Design Philosophy
01

One material, shaped by light

The entire interface is a single surface. Elements don't sit on top of the background — they emerge from it. A raised button is the same color as the background but has a light shadow on one side and a dark shadow on the other, creating the illusion that it's being pushed out of the material. This physical logic runs through every element.

02

Shadows are the design language

Where other styles use color fills and borders to define elements, neumorphism uses only shadows. Two shadows per element — one light, one dark — positioned as if light comes from the top-left. This consistency is what makes the effect believable. The moment shadow directions mix, the physical illusion collapses.

03

Press is the interaction

The signature interaction of neumorphism is the button press: a raised element becomes inset when clicked, like a physical button depressing. Light and dark shadows invert. This transition is what makes the interface feel satisfying and tactile in a way no other style achieves. It's not decoration — it's the core interaction model.

04 · Use With Claude / Cursor
Claude
01Open your Claude project
02Click 'Add files' in the Project Knowledge panel
03Drop in SKILL.md and DESIGN.md
04Start a new chat in the project — Claude follows the spec
Cursor
01Place SKILL.md and DESIGN.md in your repo root
02Open .cursor/rules and add @SKILL.md @DESIGN.md
03Restart Cursor for the rules to apply
04Build normally — Cursor references both files per request
★ PRO TIP

Before building with Claude Code, drop SKILL.md and DESIGN.md into Claude Design first. Use it to generate mockups and nail the visual direction — then hand those references to Claude Code. You'll get significantly higher quality output than going straight to code.

05 · Watch Out For
! WARNING
Wrong background color
This is the most common failure. Neumorphism only works on a medium gray surface — not white, not dark. If the background is wrong, the shadows have nothing to work against.
! WARNING
Elements too close together
Shadows need space to be visible. If elements are tightly packed the shadows merge into gray noise. Use generous spacing between everything.
! WARNING
Too colorful
Neumorphism's material is the color of the background. Introducing many colors breaks the "single material" illusion. Use one subtle accent color maximum.
! WARNING
Small text on neumorphic surfaces
The low contrast that creates the tactile effect also makes small text hard to read. Keep text large and use high-contrast color for anything important.
● 07 · Download

Two files. That's it.

Drop them into your Claude project or Cursor rules and build normally. No CLI, no package manager, no setup.

↓ SKILL.MD↓ DESIGN.MD