CSS blur() functie

definitie en gebruik

CSS blur() De filterfunctie past een vervagingseffect toe op het element. Hoe groter de waarde, hoe sterker het vervagingseffect.

Indien geen waarde is gespecificeerd, wordt standaard 0 gebruikt.

voorbeeld

voorbeeld 1

Gebruik verschillende vervagingseffecten voor de <h1> en <img> elementen:

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

probeer het zelf

voorbeeld 2

Maak een vaag achtergrond aan:

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

probeer het zelf

CSS syntaxis

blur(radius)

technische details

browserondersteuning

De cijfers in de tabel geven de browserversie aan die de functie volledig ondersteunt.

gerelateerde pagina's

Referentie:CSS filter eigenschap

Referentie:CSS brightness() functie

Referentie:CSS contrast() functie

Referentie:CSS drop-shadow() functie

Referentie:CSS grayscale() functie

Referentie:CSS hue-rotate() functie

Referentie:CSS invert() functie

Referentie:CSS opacity() functie

Referentie:CSS saturate() functie

Referentie:CSS sepia() functie