Backdrop Blur

Definition

Utilities for applying filters (like blur) to the area exactly BEHIND an element. Often called 'Glassmorphism'.

Explain Like I'm New

Frosted glass. You create a semi-transparent white box (`bg-white/30`) and apply `backdrop-blur-md`. Anything on the webpage that scrolls underneath this box will become beautifully blurred.

Real World Example

Apple's iOS design language. Sticky navbars at the top of an iPhone app are usually frosted glass, blurring the text as it scrolls underneath.

Common Use Cases

•Navbars
•Modals
•Modern 'Glass' UI

Interactive Example

Interview Questions

basic

If you apply `backdrop-blur` to a solid black `bg-black` div, will you see the effect?

intermediate

What two classes must be combined to achieve the 'Frosted Glass' effect?

Flash Cards

Question

Solid black div?

Click to reveal answer

Answer

No! You can only blur the things BEHIND the element if you can actually see through the element. The element must have some transparency (e.g., `bg-black/50`).

Question

Two classes?

Click to reveal answer

Answer

A transparent background color (`bg-white/30`) AND the blur utility (`backdrop-blur-md`).