Friday Night Wiki
TopicsAbout
Buy me a coffee
Web Design Styles

Glassmorphism

A design trend featuring frosted glass effects with transparency, blur, and subtle borders to create layered, dimensional interfaces.

Core Principles

1. Transparency

Background elements show through with reduced opacity (typically 10-40%).

2. Backdrop Blur

CSS backdrop-filter: blur() creates the frosted glass effect.

3. Subtle Borders

Light borders (often with gradients) define edges against varying backgrounds.

4. Layering

Multiple glass panels create depth and hierarchy.

5. Vivid Backgrounds

Works best over colorful gradients or images to showcase the glass effect.

Visual Characteristics

The Glass Effect

.glass {
  /* Semi-transparent background */
  background: rgba(255, 255, 255, 0.25);
  
  /* Blur effect */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  
  /* Subtle border */
  border: 1px solid rgba(255, 255, 255, 0.18);
  
  /* Rounded corners */
  border-radius: 16px;
  
  /* Optional: inner shadow for depth */
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
}

Dark Glass Variant

.glass-dark {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

Implementation Examples

Glassmorphic Card

<div class="glass-background">
  <div class="glass-card">
    <h2>Glassmorphism</h2>
    <p>Beautiful frosted glass effect that reveals the background beneath.</p>
    <button class="glass-button">Learn More</button>
  </div>
</div>

/* Colorful background to showcase glass */
.glass-background {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.glass-card {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 40px;
  max-width: 400px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
}

.glass-card h2 {
  margin: 0 0 16px 0;
  color: white;
  font-size: 2rem;
  font-weight: 700;
}

.glass-card p {
  margin: 0 0 24px 0;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

.glass-button {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 12px 24px;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.glass-button:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(31, 38, 135, 0.3);
}

<nav class="glass-nav">
  <div class="logo">Brand</div>
  <ul class="nav-links">
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

.glass-nav {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  z-index: 1000;
}

.logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
}

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: white;
}

Modal/Dialog

<div class="glass-overlay">
  <div class="glass-modal">
    <div class="modal-header">
      <h3>Modal Title</h3>
      <button class="close-btn">×</button>
    </div>
    <div class="modal-body">
      <p>This is a glassmorphic modal with beautiful transparency.</p>
    </div>
    <div class="modal-footer">
      <button class="glass-button">Cancel</button>
      <button class="glass-button-solid">Confirm</button>
    </div>
  </div>
</div>

.glass-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.glass-modal {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
  width: 90%;
  max-width: 500px;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.modal-header h3 {
  margin: 0;
  color: white;
  font-size: 1.5rem;
}

.close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
  transition: opacity 0.3s;
}

.close-btn:hover {
  opacity: 0.7;
}

.modal-body {
  padding: 24px 28px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

.modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 24px 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.glass-button-solid {
  background: white;
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  color: #667eea;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.glass-button-solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

Pricing Card

<div class="glass-pricing">
  <div class="pricing-header">
    <h3>Pro Plan</h3>
    <div class="price">
      <span class="amount">$29</span>
      <span class="period">/month</span>
    </div>
  </div>
  <ul class="features">
    <li>✓ Unlimited projects</li>
    <li>✓ Priority support</li>
    <li>✓ Advanced analytics</li>
    <li>✓ Custom domain</li>
  </ul>
  <button class="glass-button-cta">Get Started</button>
</div>

.glass-pricing {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 32px;
  max-width: 320px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
}

.pricing-header {
  text-align: center;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.pricing-header h3 {
  margin: 0 0 16px 0;
  color: white;
  font-size: 1.5rem;
  font-weight: 600;
}

.price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.amount {
  font-size: 3rem;
  font-weight: 700;
  color: white;
}

.period {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
}

.features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
}

.features li {
  color: rgba(255, 255, 255, 0.9);
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.features li:last-child {
  border-bottom: none;
}

.glass-button-cta {
  width: 100%;
  background: white;
  border: none;
  border-radius: 12px;
  padding: 14px;
  color: #667eea;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}

.glass-button-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(255, 255, 255, 0.3);
}

<div class="glass-search">
  <input type="text" placeholder="Search...">
  <button class="search-btn">
    <svg><!-- Search icon --></svg>
  </button>
</div>

.glass-search {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 4px 4px 4px 20px;
  max-width: 400px;
  box-shadow: 0 4px 16px rgba(31, 38, 135, 0.25);
}

.glass-search input {
  flex: 1;
  background: none;
  border: none;
  color: white;
  font-size: 1rem;
  padding: 8px;
  outline: none;
}

.glass-search input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.search-btn {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.search-btn:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: scale(1.05);
}

.search-btn svg {
  width: 20px;
  height: 20px;
  fill: white;
}

Browser Support

Backdrop Filter Support

/* Feature detection and fallback */
@supports (backdrop-filter: blur(10px)) {
  .glass {
    backdrop-filter: blur(10px);
  }
}

@supports not (backdrop-filter: blur(10px)) {
  .glass {
    /* Fallback: more opaque background */
    background: rgba(255, 255, 255, 0.8);
  }
}

/* Webkit prefix for Safari */
.glass {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

Browser Compatibility

  • ✅ Chrome 76+
  • ✅ Safari 9+
  • ✅ Edge 79+
  • ✅ Firefox 103+ (behind flag in older versions)
  • ❌ IE 11 (not supported)

When to Use Glassmorphism

Perfect For

  • Landing pages: Modern, eye-catching hero sections
  • Modals/Overlays: Maintains context with background
  • Navigation bars: Floats above content elegantly
  • Dashboard widgets: Adds visual interest without distraction
  • Music/Media players: Stylish, modern interface

Real-World Examples

  • Windows 11: Acrylic backgrounds
  • macOS Big Sur: Translucent menus and sidebars
  • iOS: Control Center, notification panels
  • Spotify: Various UI elements

Pros and Cons

Advantages

  • ✅ Modern, premium appearance
  • ✅ Maintains visual context (see-through)
  • ✅ Works well over colorful backgrounds
  • ✅ Adds depth without heavy shadows
  • ✅ Elegant and sophisticated
  • ✅ Pairs well with gradients
  • ✅ Creates visual hierarchy naturally

Disadvantages

  • ❌ Performance-intensive (blur is expensive)
  • ❌ Browser support limitations
  • ❌ Readability can suffer
  • ❌ Needs vibrant background to shine
  • ❌ Can look gimmicky if overused
  • ❌ Accessibility concerns with low contrast

Common Mistakes

1. Too Much Blur

Wrong: Excessive blur makes everything muddy.

/* Wrong - too blurry */
backdrop-filter: blur(50px); /* Overkill */

Right: Keep blur subtle.

/* Right - appropriate blur */
backdrop-filter: blur(10px); /* Sweet spot */

2. Insufficient Contrast

Wrong: White text on light glass over bright background.
Right: Ensure text is readable.

/* Add subtle background to improve readability */
.glass-text {
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
}

3. No Fallback

Wrong: Users on unsupported browsers see broken design.
Right: Provide fallback styling.

/* Fallback for older browsers */
.glass {
  background: rgba(255, 255, 255, 0.8); /* Fallback */
}

@supports (backdrop-filter: blur(10px)) {
  .glass {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
  }
}

4. Overusing the Effect

Wrong: Everything is glass, creating visual fatigue.
Right: Use strategically for key elements.

Performance Optimization

/* Performance tips */
.glass-optimized {
  /* 1. Use will-change for animated elements */
  will-change: backdrop-filter;
  
  /* 2. Hardware acceleration */
  transform: translateZ(0);
  
  /* 3. Limit blur radius (smaller is faster) */
  backdrop-filter: blur(8px); /* Instead of 20px */
  
  /* 4. Reduce on mobile if needed */
  @media (max-width: 768px) {
    backdrop-filter: blur(5px);
  }
}

/* Only apply blur when visible */
.glass-modal {
  backdrop-filter: none;
}

.glass-modal.active {
  backdrop-filter: blur(10px);
}

Advanced Techniques

Gradient Border

.glass-gradient-border {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 2px;
  background-clip: padding-box;
  border: 2px solid transparent;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

Layered Glass

.glass-layers {
  position: relative;
}

.glass-layer-1 {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  border-radius: 24px;
  padding: 40px;
}

.glass-layer-2 {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  padding: 24px;
  margin-top: -20px;
}

Animated Glass

.glass-animated {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  transition: all 0.3s ease;
}

.glass-animated:hover {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(15px);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(31, 38, 135, 0.45);
}

Color Variations

/* Warm glass */
.glass-warm {
  background: rgba(255, 200, 120, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 200, 120, 0.3);
}

/* Cool glass */
.glass-cool {
  background: rgba(120, 180, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(120, 180, 255, 0.3);
}

/* Dark glass */
.glass-dark {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

Accessibility Guidelines

Ensuring Readability

/* High contrast text on glass */
.glass-accessible {
  background: rgba(0, 0, 0, 0.5); /* Darker for text readability */
  backdrop-filter: blur(10px);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Alternative: text shadow for contrast */
.glass-text-shadow {
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Provide high-contrast mode */
@media (prefers-contrast: high) {
  .glass {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: none;
    border: 2px solid black;
  }
}

Checklist

  • [ ] Backdrop-filter blur is between 5-15px
  • [ ] Background opacity is 10-40%
  • [ ] Subtle border with slight transparency
  • [ ] Text has sufficient contrast (4.5:1 minimum)
  • [ ] Fallback provided for unsupported browsers
  • [ ] Performance tested on target devices
  • [ ] Works over various background colors/images
  • [ ] Focus states are clearly visible
  • [ ] Not overused; strategic placement only
  • [ ] Tested on mobile devices

Tools and Resources

Online Generators

Background Generators

Inspiration

Best Practices Summary

Do

  • ✅ Use vibrant, colorful backgrounds
  • ✅ Keep blur subtle (8-12px)
  • ✅ Provide browser fallbacks
  • ✅ Test readability thoroughly
  • ✅ Use strategically, not everywhere
  • ✅ Optimize for performance

Don't

  • ❌ Sacrifice readability for aesthetics
  • ❌ Ignore browser compatibility
  • ❌ Overuse on every element
  • ❌ Use on plain white backgrounds (no effect)
  • ❌ Make borders too thick
  • ❌ Forget mobile performance