Funzione blur() CSS

Definizione e uso

Funzione blur() CSS blur() La funzione di filtro applica un effetto di sfocatura agli elementi. Più grande è il valore, più forte è l'effetto di sfocatura.

Se non viene specificato un valore, viene utilizzato di default 0.

Esempio

Esempio 1

Applicare effetti di sfocatura diversi agli elementi <h1> e <img>:

h1 {
  filter: blur(2px);
}
#img1 {
  filter: blur(2px);
}
#img2 {
  filter: blur(6px);
}

Prova personalmente

Esempio 2

Creare uno sfondo sfocato:

img.background {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
  filter: blur(35px);
}

Prova personalmente

Sintassi CSS

blur(radius)

Dettagli tecnici

Supporto del browser

I numeri nella tabella rappresentano la versione del browser che supporta completamente la funzione.

Pagina correlata

Riferimento:Proprietà filter CSS

Riferimento:Funzione CSS brightness()

Riferimento:Funzione contrast() CSS

Riferimento:Funzione drop-shadow() CSS

Riferimento:Funzione grayscale() CSS

Riferimento:Funzione hue-rotate() CSS

Riferimento:Funzione invert() CSS

Riferimento:Funzione opacity() CSS

Riferimento:Funzione CSS saturate()

Riferimento:Funzione CSS sepia()