Glassmorphism

Glassmorphism is a design-style child skill ('looking through a frosted window - interfaces that blend seamlessly with vibrant backgrounds'), part of the design-it family and not meant to be triggered directly. Three core principles: Background Blur (the defining characteristic - elements blur whatever sits underneath them via backdrop filter), Semi-Transparent White/Dark Backgrounds (panels use rgba() colors so the background shines through), and Subtle Light Borders (a 1px semi-transparent white or light border simulates the glass edge catching light).

Use it when the user's request matches this frosted-glass, layered-transparency aesthetic - modern dashboards, settings panels, or any UI overlaying a vibrant gradient or photo background. It explicitly requires a complex, vibrant, or textured background to actually work - a plain solid background gives the effect nothing to blur, defeating the point. As a design sub-style, it's selected by the parent design-it skill's routing rather than invoked on its own.

Visual DNA needs a vibrant or textured background (gradients, abstract meshes, or photos), often over Yacht Club or Earth-Grounded Elegance if there's underlying visual texture, clean geometric sans-serifs, and high-contrast pure-white or pure-black text required for legibility against the glass. The web implementation leans entirely on backdrop-filter: blur(): a glass panel uses a light rgba(255,255,255,0.15) or dark rgba(0,0,0,0.25) background, backdrop-filter: blur(16px) (with the -webkit- prefix for Safari), a semi-transparent white border to simulate the glass edge, and a soft, subtle drop shadow to detach the pane from the background.

.glass-panel {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

SwiftUI has native, built-in glassmorphism via the .ultraThinMaterial, .thinMaterial, .regularMaterial, and .thickMaterial background modifiers - no manual blur implementation required. A glass card composes one of these materials as its background, a white-stroked RoundedRectangle overlay for the glass edge highlight, and a soft detached shadow, placed over a vibrant LinearGradient background so the frosted effect is actually visible - even nested elements like buttons can use .ultraThinMaterial for a consistent layered-glass look.

Designers and developers building a dashboard, settings panel, or overlay UI meant to sit visually on top of a vibrant gradient or photo background, using genuine backdrop-blur transparency rather than a flat semi-transparent color fill that just fakes the look - the difference is immediately visible once anything moves behind the panel, since a real blur tracks it and a faked one doesn't.