Generate Neumorphic UI Components with Soft Shadows

Neumorphism (Soft UI) is a design-style child skill ('elements extruded from the background material itself, shaped by a singular, persistent light source'), part of the design-it family and not meant to be triggered directly. Three core principles: Unified Surface Color (the background and every element MUST share the exact same base color - no exceptions), Dual Shadows (elements are shaped entirely by two shadows - a light highlight on the side facing the light source, a dark shadow on the opposite side), and No Borders (the shape is defined purely by shadow, never an actual border line).

Use it when the user's request matches this soft, extruded-material aesthetic - calm wellness apps, smart-home controls, or minimal utility panels that want elements to feel physically pressed into or raised out of the same surface. As a design sub-style, it's selected by the parent design-it skill's routing rather than invoked on its own.

Visual DNA works best with mid-tone neutrals - Desert Mirage, Earth-Grounded Elegance, or Sophisticated Neutral - explicitly avoiding pure white or pure black, since the light and dark shadow variants won't read against either extreme. Typography is soft, rounded sans-serifs (Nunito, Quicksand), and shapes favor pills and rounded rectangles since sharp corners break the illusion of extruded material. The entire effect lives in box-shadow: a raised element gets a light highlight shadow on one corner and a darker shadow on the opposite corner, both derived from the exact same base background color at different lightness - and a pressed/active state simply inverts both shadows to inset, making the element look sunken into the surface instead of raised out of it.

.neu-element {
  background-color: var(--base-color);
  box-shadow: 9px 9px 18px var(--shadow), -9px -9px 18px var(--highlight);
}
.neu-pressed {
  box-shadow: inset 9px 9px 18px var(--shadow), inset -9px -9px 18px var(--highlight);
}

SwiftUI reproduces the dual-shadow technique with two separate .shadow() modifiers on the same view - a white-tinted highlight offset toward the light source and a black-tinted shadow offset away from it - using the identical base color for the card background as the surrounding surface, with a separate pressed-button variant tracking press state to swap between the raised and inset shadow pairs.

Designers and developers building a calm, tactile interface - wellness apps, smart-home controls, minimal utility panels - where elements should feel physically extruded from or pressed into a single-color surface rather than floating on a contrasting background.