🎨

Glassmorphism Effect 🪟

Intermediate

150 XP

55 min

Lesson Content

Glassmorphism Effect 🪟

Create that trendy frosted glass effect you see on modern websites. It's super popular in 2024!

Glassmorphism CSS

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

Key Properties

backdrop-filter: blur() - Creates the blur effect
rgba() - Semi-transparent background
border - Subtle border for definition

Example Code

Create a glassmorphism card

<div class="container">
  <div class="glass">
    <h2>Glass Effect</h2>
    <p>Frosted glass design</p>
  </div>
</div>

<style>
.container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  height: 400px;
  padding: 50px;
}
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 30px;
  color: white;
}
</style>

Expected Output:

Card with glassmorphism effect

Study Tips

•Read the theory content thoroughly before practicing
•Review the example code to understand key concepts
•Proceed to the Practice tab when you're ready to code