CSS · Module 23 · Lesson 44 of 48

Filters & Glassmorphism Blur

What is a Backdrop Filter?

Imagine holding a piece of frosted glass over a colorful painting. The glass itself is clear, but it applies a beautiful, blurry, translucent effect to the painting behind it, making anything written on the glass stand out clearly.

In CSS, the backdrop-filter property applies graphical effects (like blur, contrast, or grayscale) to the area behind an element. This is different from the standard filter property, which applies effects to the element itself.

Why does it matter?

Backdrop filters are the engine behind Glassmorphism, a premium design aesthetic popular in modern operating systems and high-end web apps. Setting a semi-transparent background color combined with backdrop-filter: blur(8px); creates a frosted glass card effect that looks incredibly sleek.

Syntax Breakdown

backdrop-filter: blur(8px); — Blurs the background content behind the element by 8 pixels.

*Note: To see the effect, the element itself must have a semi-transparent background color* (like rgba(255, 255, 255, 0.5)). If the background is fully solid, the blur behind it will be hidden!

Common Mistakes

Confusing filter and backdrop-filter: If you write filter: blur(8px); on a card, it will blur the card's text, images, and borders, making it completely unreadable. Always use backdrop-filter: blur(8px); to keep the card content sharp while blurring only what is behind it!

Quick Reference

backdrop-filter — Applies visual filters to background layouts.

blur(px) — Frosted glass blur effect multiplier.

Glassmorphism — Frosted overlay design aesthetic.

Your Task

Apply `backdrop-filter: blur(8px);` to the `.glass-card` class.

index.html

Type code above to start the lesson.

Live Preview