📡 You're offline — showing cached content
⚡ New version available!
Quick Access
🗺️ Roadmaps 🃏 Flashcards 📚 Series 🎓 Tutorials 🗺️ My Path 🎤 Mock Interview ⚡ Cheat Code 📄 Resume Builder 🛠️ Dev Tools
Tutorials › CSS Mastery › Glassmorphism

Glassmorphism

4 min read
Glassmorphism: background: rgba(255,255,255,0.15) for transparency, backdrop-filter: blur(12px) for the blur effect, and a subtle white border. It needs a colourful or interesting background behind it to look effective.

Glassmorphism Effect

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

Works best over colourful, blurred backgrounds.