Project 23: Weather Widget

CSS Stylist

Builds on these lessons

Effects Backdrop Filter Effects Clip Path Effects Mask

Step 1 of 3

Project

Backdrop Filter (Glassmorphism)

Give .weather-card backdrop-filter: blur(12px) with a translucent background-color: rgba(255,255,255,0.2). Unlike a normal filter (which blurs the element itself), backdrop-filter blurs whatever sits BEHIND it — the classic frosted-glass card look, sitting over a sky photo.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

.weather-card {
  backdrop-filter: blur(12px);
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 24px;
}

← Previous Next →