CSS blur() funktion

Definition och användning

CSS blur() Filter-funktioner applicerar en suddig effekt till element. Ju större värdet är, desto starkare blir suddig effekten.

Om inget värde anges används standardvärdet 0.

Exempel

Exempel 1

Applicera olika blurring-effekter till <h1> och <img>-element:

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

Prova själv

Exempel 2

Skapa suddig bakgrund:

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

Prova själv

CSS syntax

blur(radius)

Tekniska detaljer

Webbläsarstöd

Talen i tabellen representerar den första versionen av webbläsaren som helt stöder denna funktion.

Relaterade sidor

Referens:CSS filter egenskap

Referens:CSS brightness() funktion

Referens:CSS contrast() funktion

Referens:CSS drop-shadow() funktion

Referens:CSS grayscale() funktion

Referens:CSS hue-rotate() funktion

Referens:CSS invert() funktion

Referens:CSS opacity() funktion

Referens:CSS saturate() funktion

Referens:CSS sepia() funktion