Neumorphism
新拟态
Aliases:软浮雕风格凹凸按钮柔和双阴影soft UI
What is it
A soft relief style that uses paired light and dark shadows on similarly colored surfaces. Controls appear pressed into or raised from a shared material. It works best with a small number of elements. Shadows alone cannot communicate interactivity, selection or disabled states; retain labels, visible focus and sufficient contrast.
Design spec
Typography
Clear sans-serif type; avoid overly light weights.
Color
Light blue-grey surfaces, dark text and blue accents.
Border
Medium to large radii with a visible focus outline.
Shadow
Paired outer shadows for elevation; inset shadows for pressing.
Spacing
Space controls so shadows do not collide.
Motion
150–200ms raised-to-inset shadow transitions
States
Hover deepens and raises the shadow; focus must keep a visible 2px outline; active switches to an inset press; disabled lowers contrast; error uses a red inset shadow
Style in action
See the full page, then try the interactive sceneFull-page preview
Make focus
a daily ritual.
Simple tools. A quieter experience.
More time for the things that matter.
A lovely day ahead.
Take a little breath.
Interactive scene
Loading demo…
✓ When to use
- Music controls, lightweight utilities and product demonstrations.
- Sparse interfaces that benefit from a soft material feel.
✕ When not to use
- Dense tables and complex interfaces requiring strong boundaries.
- Never make shadow direction the only state signal.
Variants
Raised
凸起表面
Paired outer shadows suggest raised controls.
Inset
凹陷表面
Inset shadows suggest pressed controls or tracks.
Implementation
box-shadowinsetborder-radius:focus-visibleDerive shadows from the shared surface; use positive and negative offsets for raised controls and inset for pressed states. Reinforce focus and selection with labels or icons. Avoid large animated shadows and support reduced motion.
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Inspect existing layouts, typography and theme tokens, then build an interactive Neumorphism brand scene. Clear sans-serif type; avoid overly light weights. Light blue-grey surfaces, dark text and blue accents. Medium to large radii with a visible focus outline. Paired outer shadows for elevation; inset shadows for pressing. Space controls so shadows do not collide. Derive shadows from the shared surface; use positive and negative offsets for raised controls and inset for pressed states. Reinforce focus and selection with labels or icons. Avoid large animated shadows and support reduced motion. Make controls give clear feedback, support narrow screens, focus and reduced motion, and add no dependencies. Run checks and list modified files. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
A visual language that borrows real-world materials and physical forms for digital controls: leather stitching, wood grain, brushed metal, glass gloss. Buttons look pressable, switches look like levers — highlights, shadows and bevels make "what it looks like" teach "how it works".
StylesSimilarA visual language that molds controls from soft clay: generous radii on pastel grounds, with a double shadow — an inner concave plus an outer inflated drop — so elements feel like air-puffed clay: round, plump, squishable. A tactile middle ground between neumorphism and 3D cartoon.
StylesSimilarA visual language built on "less is more": generous whitespace, a restrained monochrome palette and very few type scales let the content speak. All decoration is stripped away; hierarchy is created purely by space, weight and rhythm. Quiet, restrained, content-first.
StylesSimilarA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsAffects