CSS blur() Funktion

Definition und Verwendung

CSS blur() Die Filterfunktion wendet einen Unschärfeneffekt auf das Element an. Je größer der Wert, desto stärker der Unschärfeneffekt.

Falls kein Wert angegeben ist, wird standardmäßig 0 verwendet.

Beispiel

Beispiel 1

Wenden Sie verschiedene Unschärfeneffekte auf die <h1> und <img>-Elemente an:

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

Versuchen Sie es selbst

Beispiel 2

Erstellen Sie einen verschwommenen Hintergrund:

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

Versuchen Sie es selbst

CSS Syntax

blur(radius)

Technische Details

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die erste Version der Browser dar, die diese Funktion vollständig unterstützen.

Verwandte Seiten

Referenz:CSS filter Eigenschaft

Referenz:CSS brightness() Funktion

Referenz:CSS contrast() Funktion

Referenz:CSS drop-shadow() Funktion

Referenz:CSS grayscale() Funktion

Referenz:CSS hue-rotate() Funktion

Referenz:CSS invert() Funktion

Referenz:CSS opacity() Funktion

Referenz:CSS saturate() Funktion

Referenz:CSS sepia() Funktion