Glass Surfaces

Frosted glass effects that create depth and visual hierarchy while maintaining context awareness. Inspired by iOS and macOS design language.

Blur Intensities

Subtle Blur

Light frosting for elevated surfaces that need to stay connected to content beneath.

Subtle blur (8px) 
.glass-subtle {
  background: var(--bg-glass);
  backdrop-filter: blur(var(--glass-blur-subtle));
  -webkit-backdrop-filter: blur(var(--glass-blur-subtle));
  border: 1px solid var(--border-glass);
}

Medium Blur

Standard frosting for modals, dropdowns, and floating panels.

Medium blur (16px) 
.glass-medium {
  background: var(--bg-glass);
  backdrop-filter: blur(var(--glass-blur-medium));
  -webkit-backdrop-filter: blur(var(--glass-blur-medium));
  border: 1px solid var(--border-glass);
}

Heavy Blur

Strong frosting for full-screen overlays and critical modals.

Heavy blur (24px) 
.glass-heavy {
  background: var(--bg-glass);
  backdrop-filter: blur(var(--glass-blur-heavy));
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
  border: 1px solid var(--border-glass);
}

Persona-Tinted Glass

Glass surfaces can carry subtle persona tints for brand reinforcement without overwhelming the interface.

Persona Variants

Each persona has a subtle tint that can be applied to glass surfaces.

Ferni
Maya
Peter
Alex
Jordan
Nayan 
.glass-ferni {
  background: rgba(var(--persona-ferni-rgb), 0.1);
  backdrop-filter: blur(var(--glass-blur-medium));
  border: 1px solid rgba(var(--persona-ferni-rgb), 0.2);
}

.glass-maya {
  background: rgba(var(--persona-maya-rgb), 0.1);
  backdrop-filter: blur(var(--glass-blur-medium));
  border: 1px solid rgba(var(--persona-maya-rgb), 0.2);
}

Modal Overlay

Glass Modal

Full modal implementation with glass backdrop and surface.

<div class="modal-backdrop">
  <div class="modal-surface">
    <h2>Modal Title</h2>
    <p>Modal content goes here...</p>
    <button class="btn btn-primary">Confirm</button>
  </div>
</div>

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-surface {
  background: var(--bg-glass);
  backdrop-filter: blur(var(--glass-blur-heavy));
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  max-width: 480px;
  box-shadow: var(--shadow-xl);
}

Floating Panels

Dropdown Panel

Glass dropdown for menus and contextual actions.

Profile
Settings
Sign out 
.dropdown-panel {
  background: var(--bg-glass);
  backdrop-filter: blur(var(--glass-blur-medium));
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  min-width: 200px;
  box-shadow: var(--shadow-lg);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-ease-out);
}

.dropdown-item:hover {
  background: var(--bg-hover);
}

Card with Glass

Glassmorphic Card

Cards that use glass effects for a premium, layered feel.

Daily Check-in

with Ferni

How are you feeling today? I noticed you've been working hard lately.

.glass-card {
  background: var(--bg-glass);
  backdrop-filter: blur(var(--glass-blur-medium));
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-lg);
}

.btn-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-glass);
  color: var(--text-primary);
}

CSS Custom Properties

Property Value Usage
--glass-blur-subtle 8px Light frosting, elevated surfaces
--glass-blur-medium 16px Standard modals, dropdowns
--glass-blur-heavy 24px Full overlays, critical modals
--bg-glass rgba(255, 255, 255, 0.7) Glass surface background
--border-glass rgba(255, 255, 255, 0.3) Glass surface border

Browser Support

Chrome / Edge

Full Support

backdrop-filter with -webkit- prefix

Safari

Full Support

Native backdrop-filter support

Firefox

Full Support

backdrop-filter since v103

Older Browsers

Graceful Fallback

Solid background color used

/* Fallback for browsers without backdrop-filter */
.glass-surface {
  background: var(--bg-elevated); /* Fallback */
}

@supports (backdrop-filter: blur(1px)) {
  .glass-surface {
    background: var(--bg-glass);
    backdrop-filter: blur(var(--glass-blur-medium));
    -webkit-backdrop-filter: blur(var(--glass-blur-medium));
  }
}

Accessibility

Contrast Ratio

Text on glass surfaces maintains WCAG 2.1 AA contrast (4.5:1 for body, 3:1 for large text).

Motion Sensitivity

Glass effects are static and don't cause motion sensitivity issues.

Reduced Transparency

Honor prefers-reduced-transparency by increasing opacity or using solid backgrounds.

Focus Visibility

Focus rings remain clearly visible against glass backgrounds with sufficient contrast.