CSS Filter

Was sind CSS Filter?

CSS-Filter sind visuelle Effekte, die auf ein Element angewendet werden – meist auf Bilder, Videos oder ganze Container. Sie verändern die Darstellung nach dem Rendern, ähnlich wie Filter in Photoshop oder Instagram.

Typische Einsatzgebiete

Bilder abdunkeln oder weichzeichnen
Hover-Effekte
UI-Spielereien
Accessibility (z. B. Kontrast erhöhen)

Syntax

img {
  filter: blur(5px);
}

Mehrere Filter kombiniert:

img {
  filter: grayscale(100%) brightness(1.2);
}

Reihenfolge ist wichtig!

Filter werden von links nach rechts angewendet.
Wird die Reihenfolge umgedreht, entsteht ein neuer Effekt.

Wichtig: Viele Filter-Funktionen akzeptieren entweder eine Zahl (Faktor) oder einen Prozentwert. Dabei gilt: 1 entspricht 100%, 2 entspricht 200%, 0.5 entspricht 50%.

Ohne Filter
Blur (Weichzeichnen)
filter: blur(6px);

                        Die Länge gibt den Radius des Weichzeichners an. 0 ist der Standardwert. Ein höherer Wert ist mehr Weichzeichnung. 
Werte: px | rem | em
Negative Werte: werden nicht akzeptiert
Prozentwerte: sind ungültig
Bright (Helligkeit)
filter: brightness(2);

                        Brightness wendet einen linearen Multiplikatorwert auf Elemente oder Bilder an. Werte unter 1 oder 100% machen Bilder dunkler, Werte über 100% heller. 0% ist Schwarz. 100% ist der Standardwert.
Werte: Prozent | Nummer
Negative Werte: sind nicht erlaubt
Syntax: filter: brightness(0.5); oder filter: brightness(50%);.
Contrast (Kontrast)
filter: contrast(1.5);

                        Ändert den Kontrast eines Bildes. Werte unter 1 oder 100% verringern den Kontrast, Werte über 100% erhöhen ihn. Der Wert 0 oder 0% erzeugt ein graues Bild. 100% ist der Standardwert.
Werte: Prozent | Nummer
Negative Werte: sind nicht erlaubt
Syntax: filter: contrast(1.5); oder filter: contrast(150%);.
Drop-Shadow (Schlagschatten)
filter: drop-shadow(0px 0px 10px rgba(0,0,0,.5));
Wendet einen Schlagschatteneffekt auf das Bild an. Der Schatten basiert auf der Form des Elements.
Die Angabe drop-shadow() akzeptiert einen Parameter vom Typ shadow (siehe box-shadow), mit der Ausnahme, dass die Parameter inset und spread nicht erlaubt sind.
Drop-Shadow (Transparente PNG)
filter: drop-shadow(0px 0px 10px rgba(0,0,0,.5));

                        Bei PNGs mit Transparenz folgt der Schatten der Alphamaske. Bei JPGs wirkt es ähnlich wie eine box-shadow().
Werte: px
Negative Werte: sind teilweise erlaubt
Grayscale (Graustufen)
filter: grayscale(1);

                        Konvertiert ein Bild in Graustufen. Der Standardwert ist 0 (unverändert). 1 oder 100% ändert das Bild vollständig in Graustufen.
Werte: Prozent | Nummer
Negative Werte: sind nicht erlaubt
Syntax: filter: grayscale(1); oder filter: grayscale(100%);.
Hue-Rotate (Farbton)
filter: hue-rotate(90deg);

                        Rotiert den Farbton eines Elements und dessen Inhalte als Matrixoperation auf der RGB-Farbe. Es wird nicht in ein HSL-Modell konvertiert.
Werte: (Winkel) deg | (Radiant) rad | (Umdrehungen) turn
Negative Werte: sind erlaubt
Gleichwertige Syntax:

                            filter: hue-rotate(90deg)

                            filter: hue-rotate(-450deg)

                            filter: hue-rotate(0.25turn)

                            filter: hue-rotate(1.5708rad).
                        
Invert (Inversion)
filter: invert(0.9);

                        Invertiert alle Farben. 100% ist vollständig invertiert, 0% bleibt unverändert. Werte zwischen 0% und 100% angeben.
Werte: Prozent | Nummer
Negative Werte: sind nicht erlaubt
Syntax: filter: invert(0.9); oder filter: invert(90%);.
Opacity (Transparenz)
filter: opacity(0.5);

                        Transparenz auf dem Bild. Diese Funktion ähnelt der etablierten opacity-Eigenschaft. Unterschied zu opacity: filter: opacity() beeinflusst keine Child-Elemente.
                        0% ist vollständig transparent, bei 100% ist das Bild unverändert. 
Werte: Prozent | Nummer
Negative Werte: sind nicht erlaubt
Syntax: filter: opacity(0.5); oder filter: opacity(50%);.
Saturate (Sättigung)
filter: saturate(3);

                        Regelt die Farbsättigung. Werte unter 100% verringern die Sättigung, Werte über 100% erhöhen die Sättigung. Ein Wert von 0% ist vollständig entsättigt, also schwarz/weiss.
Werte: Prozent | Nummer
Negative Werte: sind nicht erlaubt
Syntax: filter: saturate(3); oder filter: saturate(300%);.
Sepia (Vintage-Effekt)
filter: sepia(0.5);

                        Verwandelt Farben in warme Braun- und Gelbtöne. Kann in Prozent (0% - 100%) oder als Dezimalzahl (0 - 1) angegeben werden. Bei 100% ist das Bild komplett Sepia.
Werte: Prozent | Nummer
Negative Werte: sind nicht erlaubt
Syntax: filter: sepia(0.5); oder filter: sepia(50%);.

Filter kombinieren

Mehrere Filter können gleichzeitig angewendet werden.
Viele Filter gleichzeitig können auf älteren Geräten ruckeln. Filter werden häufig GPU-beschleunigt, können aber bei großen Bildern oder vielen Kombinationen Performance kosten.

Gut zu wissen: Filter können animiert werden, was unzählige coole Möglichkeiten bietet.

filter: saturate(6.7) sepia(0.8);
filter: sepia(0.8) saturate(6.7);
filter: grayscale(0.6) hue-rotate(210deg);
filter: brightness(1.1) contrast(120%) saturate(150%);

Filter + Hover + Transition

img {
  filter: grayscale(100%);
  transition: filter 0.4s ease;
}

img:hover {
  filter: grayscale(0%);
}

Super beliebt für Galerien!

Hauswand

Seifenblasen

Hauswand

Vertiefe dein Wissen mit einer Übung

Filter vs backdrop-filter

filter wirkt auf das Element selbst
backdrop-filter wirkt auf den Hintergrund hinter dem Element

Hinweis: backdrop-filter wird nicht von allen Browsern vollständig unterstützt.

Syntax

.card {
  backdrop-filter: blur(10px);
}

Wichtig: backdrop-filter braucht:

.card {
  background: rgba(255,255,255,0.3);
}

Alle Filter können auch als backdrop-filter verwendet werden

backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

Beispiel

See the Pen Beispiel backdrop-filter by Intensivstation (@intensivstation) on CodePen.