CSS blur() funktion

Definition og brug

CSS' blur() Filterfunktioner anvender en sløringseffekt på elementer. Jo større værdi, jo stærkere sløringseffekt.

Hvis værdien ikke er specificeret, bruges standardværdien 0.

Eksempel

Eksempel 1

Anvend forskellige sløringseffekter på <h1> og <img>-elementer:

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

Prøv det selv

Eksempel 2

Opret en sløret baggrund:

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

Prøv det selv

CSS syntaks

blur(radius)

Tekniske detaljer

Browserunderstøttelse

Tabelens tal viser den første browserversion, der fuldt ud understøtter funktionen.

Relaterede sider

Reference:CSS filter egenskab

Reference:CSS brightness() funktion

Reference:CSS contrast() funktion

Reference:CSS drop-shadow() funktion

Reference:CSS grayscale() funktion

Reference:CSS hue-rotate() funktion

Reference:CSS invert() funktion

Reference:CSS opacity() funktion

Reference:CSS saturate() funktion

Reference:CSS sepia() funktion