filter & backdrop-filter

CSS-Filter verändern die visuelle Darstellung eines Elements, ohne den DOM-Inhalt zu ändern. Mit filter wendest du Effekte wie Weichzeichnung, Helligkeit, Kontrast oder Farbverschiebungen direkt auf ein Element an. backdrop-filter macht dasselbe, aber auf den Hintergrund hinter dem Element: perfekt für Frosted-Glass-Effekte und Glassmorphism. Filter lassen sich kombinieren, animieren und erzeugen mit wenigen Zeilen CSS Effekte, die früher nur mit Bildbearbeitungsprogrammen möglich waren.

Steckbrief filter

Syntax: filter: <funktion> [<funktion>]*
Initialwert: none
Vererbt: Nein
Animierbar: Ja

Kategorie: Transformationen
Werte: 11
Beispiele: 5
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 15.02.2026

Grundlagen

filter wirkt auf das gesamte Element inklusive aller Kinder: Text, Bilder, Borders, Schatten, alles wird gefiltert. Im Gegensatz dazu wirkt backdrop-filter nur auf den Bereich hinter dem Element. Das Element selbst bleibt unverändert, aber der durchscheinende Hintergrund wird gefiltert. Damit backdrop-filter sichtbar ist, muss das Element einen teilweise transparenten Hintergrund haben (z.B. rgba oder hsla).

Mehrere Filter werden durch Leerzeichen getrennt und in der angegebenen Reihenfolge angewendet. Die Reihenfolge kann das Ergebnis beeinflussen: brightness(1.5) contrast(1.2) erzeugt ein anderes Bild als contrast(1.2) brightness(1.5).

Filter erzeugen einen neuen Stacking-Context und können die Performance beeinflussen, besonders blur() auf großen Elementen. Für Animationen ist filter gut geeignet, weil der Browser es GPU-beschleunigen kann.

Syntax & Werte

11 Werte

filter-Funktionen

Wert	Beschreibung	Beispiel
`blur(radius)`	Gausssche Weichzeichnung. 0 = scharf, höhere Werte = unschärfer.	filter: blur(4px);
`brightness(faktor)`	Helligkeit. 1 = normal, 0 = schwarz, >1 = heller.	filter: brightness(1.3);
`contrast(faktor)`	Kontrast. 1 = normal, 0 = grau, >1 = höherer Kontrast.	filter: contrast(1.5);
`grayscale(prozent)`	Entsättigung. 0% = Farbe, 100% = komplett grau.	filter: grayscale(100%);
`sepia(prozent)`	Sepia-Tönung. 0% = normal, 100% = voll Sepia.	filter: sepia(80%);
`hue-rotate(winkel)`	Dreht alle Farben auf dem Farbkreis. 360deg = volle Rotation.	filter: hue-rotate(90deg);
`invert(prozent)`	Invertiert Farben. 100% = komplett invertiert.	filter: invert(100%);
`saturate(faktor)`	Sättigung. 1 = normal, 0 = entsättigt, >1 = übersättigt.	filter: saturate(2);
`opacity(prozent)`	Transparenz (wie opacity-Property, aber als Filter kombinierbar).	filter: opacity(50%);
`drop-shadow(x y blur farbe)`	Schatten, der der tatsächlichen Form des Elements folgt (inkl. Transparenz).	filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.3));

backdrop-filter

Wert	Beschreibung	Beispiel
`backdrop-filter: <funktion>`	Filtert den Hintergrund hinter dem Element. Gleiche Funktionen wie filter.	backdrop-filter: blur(10px);

Beispiele

5 Beispiele

Eine Übersicht der wichtigsten Filter-Funktionen im direkten Vergleich.

Filter-Funktionen im Überblick

.blur      { filter: blur(3px); }
.bright    { filter: brightness(1.5); }
.contrast  { filter: contrast(2); }
.grayscale { filter: grayscale(100%); }
.sepia     { filter: sepia(100%); }
.hue       { filter: hue-rotate(90deg); }
.invert    { filter: invert(100%); }
.saturate  { filter: saturate(3); }

<div class="filter-overview">
<div class="filter-item">
  <div class="filter-img">A</div>
  <div class="filter-label">Original</div>
</div>
<div class="filter-item f-blur">
  <div class="filter-img">A</div>
  <div class="filter-label">blur(3px)</div>
</div>
<div class="filter-item f-bright">
  <div class="filter-img">A</div>
  <div class="filter-label">brightness</div>
</div>
<div class="filter-item f-contrast">
  <div class="filter-img">A</div>
  <div class="filter-label">contrast</div>
</div>
<div class="filter-item f-gray">
  <div class="filter-img">A</div>
  <div class="filter-label">grayscale</div>
</div>
<div class="filter-item f-sepia">
  <div class="filter-img">A</div>
  <div class="filter-label">sepia</div>
</div>
<div class="filter-item f-hue">
  <div class="filter-img">A</div>
  <div class="filter-label">hue-rotate</div>
</div>
<div class="filter-item f-invert">
  <div class="filter-img">A</div>
  <div class="filter-label">invert</div>
</div>
<div class="filter-item f-saturate">
  <div class="filter-img">A</div>
  <div class="filter-label">saturate</div>
</div>
</div>

Bilder werden beim Hover von grau zu farbig oder bekommen einen Zoom mit Helligkeitsänderung.

Filter-Hover-Effekte

/* Grau zu Farbe */
.image {
  filter: grayscale(100%);
  transition: filter 0.4s ease;
}
.image:hover {
  filter: grayscale(0%);
}

/* Zoom + Brightness */
.image:hover {
  filter: brightness(1.2);
  transform: scale(1.05);
}

<div class="img-hover-demo">
<div class="img-wrap hover-gray">
  <div class="img-box">Grau</div>
</div>
<div class="img-wrap hover-bright">
  <div class="img-box">Bright</div>
</div>
<div class="img-wrap hover-blur">
  <div class="img-box">Blur</div>
</div>
</div>

backdrop-filter: blur() auf einem halbtransparenten Element erzeugt den beliebten Frosted-Glass-Effekt.

Frosted Glass / Glassmorphism

.glass-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
}

<div class="glass-demo">
<div class="glass-bg-text">GLASS</div>
<div class="glass-card">
  <h4>Glassmorphism</h4>
  <p>backdrop-filter: blur(12px)</p>
</div>
</div>

drop-shadow() folgt der tatsächlichen Form des Elements (inkl. Transparenz), während box-shadow immer die rechteckige Box umgibt.

drop-shadow() vs box-shadow

/* Schatten um die Box */
.triangle {
  box-shadow: 4px 4px 8px rgba(0,0,0,0.3);
}

/* Schatten um die Form */
.triangle {
  filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.3));
}

<div class="ds-demo">
<div class="ds-wrap ds-box-shadow">
  <div class="ds-shape"></div>
  <div class="ds-label">box-shadow</div>
</div>
<div class="ds-wrap ds-drop-shadow">
  <div class="ds-shape"></div>
  <div class="ds-label">drop-shadow()</div>
</div>
</div>

Mehrere Filter erzeugen zusammen kreative Bildstile wie Vintage-Look oder Neon-Effekte.

Kombinierte Filter-Stile

.vintage {
  filter: sepia(60%) contrast(1.1) brightness(0.9);
}

.neon {
  filter: saturate(2) brightness(1.3) contrast(1.2);
}

.dramatic {
  filter: contrast(1.8) brightness(0.8) saturate(1.5);
}

<div class="combo-filter-demo">
<div class="combo-item">
  <div class="combo-box">Original</div>
  <div class="combo-label">Kein Filter</div>
</div>
<div class="combo-item vintage">
  <div class="combo-box">Vintage</div>
  <div class="combo-label">sepia + contrast</div>
</div>
<div class="combo-item neon">
  <div class="combo-box">Neon</div>
  <div class="combo-label">saturate + bright</div>
</div>
<div class="combo-item dramatic">
  <div class="combo-box">Dramatisch</div>
  <div class="combo-label">contrast + dark</div>
</div>
</div>

Barrierefreiheit

Filter verändern nur die visuelle Darstellung: Screenreader lesen den Originalinhalt vor. Aber visuelle Filter können die Lesbarkeit massiv beeinträchtigen. blur() auf Text macht ihn unleserlich, contrast() unter 0.5 verwischt Textgrenzen, und brightness() über 1.5 kann weißen Text auf hellem Hintergrund unsichtbar machen.

Glassmorphism-Effekte mit backdrop-filter: blur() sind nur dekorativ und dürfen keinen Text verdecken. Stelle sicher, dass der Text auf dem Glas-Element genug Kontrast hat, auch wenn der Hintergrund sich ändert (z.B. beim Scrollen).

Animierte Filter-Übergänge (z.B. von grayscale(100%) zu grayscale(0%)) können bei Nutzern mit Lichtempfindlichkeit problematisch sein. Respektiere prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  img {
    filter: none !important;
    transition: none !important;
  }
}

Häufige Fehler

5 Punkte

backdrop-filter ohne transparenten Hintergrund verwenden. Ohne Transparenz ist der Hintergrund nicht sichtbar und der Filter hat keinen sichtbaren Effekt. Nutze background: rgba(255,255,255,0.1) statt background: white.
Filter-Reihenfolge ignorieren. blur(5px) brightness(2) erzeugt einen hellen, weichen Schein. brightness(2) blur(5px) macht zuerst hell und verwischt dann, ein deutlich anderer Look.
filter: blur() auf große Container mit viel Inhalt anwenden. Das kann die Performance massiv beeinträchtigen, weil der gesamte Inhalt gerastert und weichgezeichnet werden muss.
drop-shadow() und box-shadow verwechseln. drop-shadow() ist eine Filter-Funktion und folgt der Form. box-shadow ist eine eigene Property und umgibt die Box.
filter: none vergessen beim Hover-Reset. Wenn du filter nur auf :hover setzt, bleibt der gefilterte Zustand ohne Transition bestehen, bis der Hover endet.

Browser-Kompatibilität

5 von 5

filter wird von allen modernen Browsern vollständig unterstützt. backdrop-filter wird seit 2022 in allen großen Browsern unterstützt.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

CSS-Filter werden in HTML-Emails praktisch nicht unterstützt. Nur Apple Mail bietet teilweisen Support.

Apple Mail

Teilweise

filter funktioniert, backdrop-filter eingeschränkt
Gmail

Keine

filter wird komplett entfernt
Outlook

Keine

Kein Support für CSS-Filter
Thunderbird

Teilweise

Grundlegende Filter funktionieren
Yahoo Mail

Keine

filter wird ignoriert

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da