filter & backdrop-filter

Zuletzt aktualisiert am 15. Februar 2026

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.

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

filter-Funktionen

backdrop-filter

Beispiele

Filter-Übersicht

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

.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>

Hover-Effekte auf Bildern

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

/* 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>

Frosted Glass / Glassmorphism

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

.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 vs box-shadow

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

/* 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>

Kombinierte Filter (Vintage & Neon)

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

.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

• 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

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

Email-Kompatibilität

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

Verwandte Eigenschaften