neumorphic-web-design

license	Apache-2.0
name	neumorphic-web-design
description	Soft UI / neumorphism design — tactile interfaces using paired light and dark box-shadows on matching-background elements. Covers the shadow math, color generation, accessibility fixes for low contrast, inset/extruded states, dark mode adaptation, and when neumorphism works vs when it fails. Activate on 'neumorphism', 'soft UI', 'soft shadows', 'neumorph', 'tactile UI', 'extruded buttons', 'inset cards', 'skeumorphic shadows'. NOT for hard shadows / brutalism (use neobrutalist-web-designer), not for glassmorphism / frosted glass (use vaporwave-glassomorphic-ui-designer).
allowed-tools	Read,Write,Edit,Glob,Grep,WebSearch,WebFetch
metadata	{"category":"Design & UX","tags":["neumorphism","soft-ui","shadows","tactile","accessibility","css","design-trend"],"pairs-with":[{"skill":"color-contrast-auditor","reason":"Neumorphism's low contrast is its biggest accessibility risk"},{"skill":"dark-mode-design-expert","reason":"Neumorphic shadows require complete recalculation for dark backgrounds"},{"skill":"native-app-designer","reason":"Neumorphism mimics physical surfaces — natural fit for native app feel"}]}
category	Design & Creative
tags	["neumorphism","web-design","soft-ui","shadows","aesthetic"]

Neumorphic Web Design

Creates soft, tactile web interfaces using the neumorphism aesthetic — elements that appear to extrude from or sink into the background surface, like buttons molded from clay. The effect relies on paired directional shadows (one light, one dark) on elements whose background color matches the parent surface.

Neumorphism is the opposite of neobrutalism. Where neobrutalism is hard, opaque, and high-contrast, neumorphism is soft, subtle, and monochromatic. It is beautiful when done right and an accessibility disaster when done wrong. This skill covers both.

When to Use

Use for:

• Music players, media controls, and audio interfaces
• Dashboard widgets and data displays (non-critical)
• Settings panels with toggles and sliders
• Personal portfolios seeking a premium, tactile feel
• Fitness/wellness apps where softness aligns with brand
• Smart home control panels
• Any UI where the interaction model is "physical" (dials, knobs, switches)

Do NOT use for:

• Hard shadows / brutalist aesthetic → use neobrutalist-web-designer
• Glassmorphism / frosted glass / blur → use vaporwave-glassomorphic-ui-designer
• Primary CTAs and conversion-critical buttons (too subtle)
• Data-dense enterprise dashboards (legibility issues at scale)
• Text-heavy content sites (blogs, documentation)
• E-commerce checkout flows (critical-path accessibility)

---

The Shadow Model

How Neumorphism Works

Every neumorphic element uses two box-shadows: a light highlight (simulating light source) and a dark shadow (simulating depth). The light source is conventionally top-left.

Light source: ↖ top-left

     LIGHT shadow               DARK shadow
     (negative offset,          (positive offset,
      white/lighter)             darker shade)
         ↗                           ↘
    ┌──────────┐
    │          │
    │  ELEMENT │
    │          │
    └──────────┘

The Critical Rule: The element's background color MUST closely match (or exactly match) the parent container's background. Neumorphism breaks visually when element and background colors diverge.

The Shadow Formula

/* Base neumorphic surface */
:root {
  --nm-bg: #e0e5ec;              
  : ;           
  : ;           
  : ;           
  : ;              
  : ;             
  : ;            
}