Glassmorphism

Glassmorphism

"Looking through a frosted window. Interfaces that blend seamlessly with vibrant backgrounds."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Background Blur (Backdrop Filter): The defining characteristic. Elements blur whatever is underneath them.
2. Semi-transparent White/Dark Backgrounds: Panels use rgba() colors to let the background shine through.
3. Subtle Light Borders: A 1px semi-transparent white (or light) border to simulate the glass edge catching the light.

Visual DNA

• Colors: Requires a vibrant or textured background to work (e.g., gradients, abstract meshes, or photos). Works beautifully over Yacht Club or Earth-Grounded Elegance if there is underlying visual texture.
• Typography: Clean, geometric sans-serifs. High contrast text (pure white or pure black) is required for legibility against the glass.
• Shadows: Soft, subtle drop shadows to detach the glass pane from the background.

Web Implementation

• Rely heavily on backdrop-filter: blur().
• CSS Example:

body {
  /* Requires a complex background to see the glass effect */
  background: url('abstract-mesh.jpg') cover; 
}

.glass-panel {
  background: rgba(255, 255, 255, 0.15); /* Light glass */
  /* OR background: rgba(0, 0, 0, 0.25); for Dark glass */
  
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  
  border: 1px solid rgba(255, 255, 255, 0.3); /* The glass edge */
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  
  padding: 32px;
}