Glassmorphism Effects

Glassmorphism

Properties

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

When It Works

• Overlays on colorful or photographic backgrounds.
• Navigation bars over content.
• Card overlays on media.
• Modal backgrounds.