blur()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

Die blur() CSS Funktion wendet einen Gaussian Blur auf das Eingangssignal-Bild an. Das Ergebnis ist ein <filter-function>.

Probieren Sie es aus

Syntax

Die blur() Funktion wendet einen Gaussian Blur auf die damit versehenen Elemente an.

css
blur(radius)

Parameter

radius

Der Radius des Unschärfe-Effekts, angegeben als eine <length>. Er bestimmt den Wert der Standardabweichung der gaußschen Funktion, d.h. wie viele Pixel auf dem Bildschirm miteinander vermischt werden; ein größerer Wert erzeugt mehr Unschärfe. Ein Wert von 0 lässt das Eingangsbild unverändert. Der Ausgangswert für Interpolation ist 0. Prozentwerte sind ungültig.

Unschärfe mit Pixeln und rem einstellen

css
blur(0)        /* No effect */
blur(8px)      /* Blur with 8px radius */
blur(1.17rem)  /* Blur with 1.17rem radius */

SVG-Filter

Das SVG-Element <feGaussianBlur> kann ebenfalls verwendet werden, um Inhalte zu verwischen. Das Attribut stdDeviation des Filters akzeptiert bis zu zwei Werte, um komplexere Unschärfe-Werte zu erzeugen. Um eine äquivalente Unschärfe zu erzeugen, geben wir einen Wert für stdDeviation an. Dieser SVG-Effekt kann dann per ID referenziert werden:

html
<svg role="none">
  <filter id="blur11">
    <feGaussianBlur stdDeviation="1.1" edgeMode="duplicate" />
  </filter>
</svg>

Die folgenden Deklarationen erzeugen denselben Effekt:

css
filter: blur(1.1px);
filter: url(#blur11); /* with embedded SVG */
filter: url(folder/fileName.svg#blur11); /* external svg filter definition */

Formale Syntax

<blur()> = 
blur( <length>? )

Beispiele

Dieses Beispiel zeigt drei Bilder: das Bild mit einer blur() Filterfunktion angewendet, das Bild mit der äquivalenten SVG-Unschärfefunktion angewendet und die Originalbilder zum Vergleich:

css
.filter {
  filter: blur(3.5px);
}
html
<svg role="img" aria-label="Flag">
  <filter id="blur">
    <feGaussianBlur stdDeviation="3.5" edgeMode="duplicate" />
  </filter>
  <image
    href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
    xlink:href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
    filter="url(#blur)" />
</svg>

Spezifikationen

Specification
Filter Effects Module Level 1
# funcdef-filter-blur

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
blur()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch