CSSbackdrop-filter áp dụng filter effects (blur, brightness, contrast, grayscale) cho phần background phía sau element, không phải chính element đó.
Ví dụ frosted glass: backdrop-filter: blur(10px) + background: rgba(255,255,255,0.3). Element phải có background semi-transparent để phần nền phía sau nhìn xuyên qua được.
Ứng dụng:
- Navigation bar trong suốt
- Modal overlays
- Glassmorphism card designs
backdrop-filter applies filter effects (blur, brightness, contrast, grayscale) to the area behind an element, rather than to the element itself.
- For example,
backdrop-filter: blur(10px)combined withbackground: rgba(255,255,255,0.3)creates a frosted glass effect popular in modern design. - The element must have a semi-transparent background so the area behind it shows through.
- Real-world uses: transparent navigation bars, modal overlays, and glassmorphism card designs.