backdrop-filter (efect de sticlă mată / frosted glass) în CSS: explicație, valori și exemple

Ce face `backdrop-filter (efect de sticlă mată / frosted glass)`

În timp ce filter estompează elementul în sine, backdrop-filter estompează ceea ce se vede prin el, dacă elementul are un fundal semi-transparent.

Este cheia stilului de design Glassmorphism (sticlă mată), folosit masiv în interfețele moderne (iOS, macOS, Windows 11) pentru bare de navigație flotante și carduri elegante.

Valori uzuale

Valoare	Descriere
`blur(px)`	Nivelul de estompare a fundalului de dedesubt.
`saturate(%)`	Crește intensitatea culorilor văzute prin sticlă.

Exemple

Exemplul 1: Bară de navigație cu efect de sticlă mată (frosted glass navbar)

Conținutul paginii care derulează pe sub meniu este estompat estetic.

nav.meniu-sticla {
  position: sticky;
  top: 0;
  background-color: rgba(255, 255, 255, 0.7); /* obligatoriu semi-transparent! */
  backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  z-index: 50;
}

Efect vizual în browser

Meniul alb semi-transparent estompează fin textul și pozele care trec pe sub el la derularea paginii.

Greșeli frecvente

Folosirea backdrop-filter pe un element cu fundal complet opac (ex. background: #ffffff); dacă fundalul este opac 100%, efectul din spate nu are cum să se vadă. Folosește întotdeauna rgba() sau oklch() cu transparență.

Comenzi înrudite

filter (blur, grayscale, brightness, drop-shadow): Aplică efecte vizuale de post-procesare grafică (estompare, alb-negru, contrast, luminozitate) asupra unui element.
background-color: Setează culoarea solidă sau semi-transparentă a fundalului unui element.
opacity: Setează gradul de transparență al unui element întreg, inclusiv al tuturor copiilor săi.

Ce face backdrop-filter (efect de sticlă mată / frosted glass)