Lädt...

CSS-Filter

Animationen schrieben Zeitleisten. Transforms legten fest, wo Pixel liegen. Filter ändern, wie diese Pixel aussehen: leichter Weichzeichner hinter einem Modal, Graustufen-Thumbnails die beim Hover Farbe bekommen, ein Foto mit mehr Helligkeit und Kontrast — alles im gleichen Layout-Platz.

Was `filter` tut

Die Eigenschaft filter legt einen oder mehrere Nachbearbeitungseffekte auf die gerenderte Ausgabe eines Elements (meist inklusive Nachfahren als Gruppe). Breite, Höhe und Dokumentfluss bleiben gleich; nur das gemalte Ergebnis ändert sich. Mit filter: none (Initialwert) heben Sie Effekte auf.

Sie verketten Funktionen in einem filter-Wert, durch Leerzeichen getrennt — ähnlich wie bei transform, nur sind die Werkzeuge visuell, nicht räumlich: filter: brightness(1.1) contrast(1.05) saturate(1.2);

Filterfunktionen auf einen Blick

📊 Häufige CSS-Filterfunktionen

Funktion	Typische Aufgabe
`blur(radius)`	Kanten weichzeichnen / Milchglas-Look (`px` oder Länge)
`brightness(%)`	Aufhellen oder abdunkeln (`1` / `100%` = unverändert)
`contrast(%)`	Tonwertbereich verstärken oder flach machen
`grayscale(%)`	Farbe entziehen (`1` = vollständig grau)
`saturate(%)`	Farbintensität erhöhen oder dämpfen
`hue-rotate(angle)`	Farbtöne auf dem Farbkreis verschieben
`opacity(%)`	Gefiltertes Ergebnis ausblenden (verwandt mit, aber nicht identisch zur Eigenschaft `opacity`)
`sepia(%)` / `invert(%)`	Warmer Vintage-Ton / Töne invertieren
`drop-shadow(…)`	Schatten entlang der Alpha-Form (Icons, transparente Kanten)
`none`	Filter entfernen

Prozent und nackte Zahlen funktionieren oft beides (grayscale(1) ≈ grayscale(100%)). Wählen Sie einen Stil pro Projekt und bleiben Sie dabei.

Graustufen-Karten, die beim Hover «aufwachen»

Klassisches Galerie-Muster: standardmäßig gedämpft, volle Farbe bei Hover. Kurzer transition auf filter wirkt bewusst — Bewegung aus früheren Lektionen, Look aus dieser.

Graustufen-Thumbnail stellt Farbe bei Hover wieder her

css

.thumb {
filter: grayscale(1);
transition: filter 0.25s ease;
}

.thumb:hover,
.thumb:focus-visible {
filter: grayscale(0);
}

grayscale(0) ist volle Farbe. Transition nur auf filter bei kleinen Änderungen; schwere Blur-Animationen auf großen Fotos sind teuer.

Sanfter Blur für Fokus

blur() weichzeichnet ein Element. Moderater Radius auf Overlays oder Hintergrundlagen — nicht auf dem gesamten body — damit Text lesbar bleibt.

Weichgezeichnetes Hintergrundpanel hinter Modal

css

.modal-scrub {
filter: blur(6px);
transform: scale(1.02);
}

.modal-dialog {
/* keep the dialog itself sharp — no filter here */
filter: none;
}

Ein großer Vorfahre mit Blur verwischt auch den Text darin. Blur lieber auf eine Hintergrundschicht (oder backdrop-filter unten), wenn der Vordergrund scharf bleiben soll.

Helligkeit und Kontrast für Fotos

Produkt- und Hero-Bilder brauchen oft eine leichte Korrektur ohne Bildeditor.

Fotokorrektur mit brightness und contrast

css

.hero-photo {
display: block;
width: 100%;
height: auto;
filter: brightness(1.08) contrast(1.06);
}

.hero-photo.is-muted {
filter: brightness(0.85) contrast(0.95) saturate(0.8);
}

Werte knapp über 1 hellen auf oder geben Kontrast Punch; unter 1 dämpfen. Kleine Schritte wirken wie Finish; große Sprünge wirken künstlich.

Mehrere Filter stapeln

Eine Deklaration kann Ton, Farbe und Weichheit kombinieren. Bei komplexen Stapeln kann die Reihenfolge zählen — schreiben Sie links nach rechts wie gewünscht und prüfen Sie im Browser.

Gestapelte saturate, hue-rotate und leichter blur

css

.sticker {
filter: saturate(1.35) hue-rotate(12deg) blur(0.3px);
}

.sticker.is-print {
filter: grayscale(0.15) contrast(1.1);
}

Starten Sie mit ein oder zwei Funktionen. Mehr nur, wenn das Design es braucht — jeder Extra-Filter kostet GPU auf großen Flächen.

`drop-shadow()` vs. `box-shadow`

box-shadow folgt der Border-Box. drop-shadow() folgt der Alpha-Silhouette — ideal für transparente PNGs und Icons, bei denen der Schatten der Form folgt, nicht einem Rechteck.

Icon-Schatten mit drop-shadow-Filter

css

.icon-glow {
width: 2.5rem;
height: 2.5rem;
filter: drop-shadow(0 4px 6px rgba(15, 23, 42, 0.35));
}

.icon-glow:hover {
filter: drop-shadow(0 6px 10px rgba(37, 99, 235, 0.45));
}

drop-shadow() unterstützt kein inset wie box-shadow. Für eingelassene Karten-Elevation bleiben Sie bei box-shadow aus der Effects-Lektion.

backdrop-filter — verwischen, was dahinter liegt

backdrop-filter wirkt auf Inhalt, der durch ein halbtransparentes Element sichtbar ist (Milchglas). Das Element braucht einen durchsichtigen Hintergrund; sonst gibt es nichts zu sampeln.

Beispiel: sticky Header über einem vollen Hero — background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(10px);. Moderne Browser unterstützen das gut; solide Fallback-Hintergrund, falls Blur wegfällt.

Filter-opacity vs. Eigenschaft `opacity`

filter: opacity(0.5) blendet die gefilterte Malerei aus. Die Eigenschaft opacity blendet das Element aus und bildet oft eine Gruppe, die Stacking und Kind-Kompositing beeinflusst. Wenn «Steuerung inklusive Kinder gemeinsam ausblenden» gemeint ist, ist die Eigenschaft opacity meist klarer. Filter-opacity() nutzen, wenn es Teil eines Filter-Stapels mit Blur oder Farbkorrektur ist.

Selbst ausprobieren

filter: grayscale(1) auf ein Kartenbild; mit :hover auf grayscale(0) und transition: filter 0.2s ease.
Hintergrundschicht mit blur(8px) weichzeichnen; Vordergrundtext ohne Filter.
Foto mit brightness(1.1) contrast(1.05) graden; beides langsam Richtung 1 zurückdrehen, bis es natürlich wirkt.
saturate(1.4) hue-rotate(20deg) auf einen Sticker; eine Funktion entfernen und vergleichen.
Transparentes PNG-Icon mit drop-shadow(...) schatten; dasselbe Icon mit box-shadow auf einer quadratischen Box vergleichen.
Optional: Milchglas-Leiste mit halbtransparentem background + backdrop-filter: blur(12px).

Typische Fehler

Starker blur() auf einem riesigen Seitenabschnitt mit lesbarem Text
inset bei drop-shadow() wie bei box-shadow erwarten
filter: opacity() nutzen, obwohl einfache opacity am Element klarer wäre
Schwere Filter auf großen Bildern bei jedem Scroll-Frame animieren ohne Performance-Check
backdrop-filter auf voll deckendem Hintergrund — dahinter sieht man nichts, kein Frost-Effekt

Kurzfassung

filter ändert das Aussehen gerenderter Pixel; der Layoutfluss bleibt
blur, brightness, contrast, grayscale, saturate und Co. in einem Wert verketten
drop-shadow() für Alpha-förmige Schatten; box-shadow für Box-Elevation
backdrop-filter mattiert, was durch eine halbtransparente Schicht scheint
Effects & Motion endet hier; als Nächstes Modern Toolkit — beginnend mit CSS Variables

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓

Fragen

🎯

70%

Zum Bestehen

♾️

∞

Zeit

🔄

∞

Versuche

📝 Anweisungen

Lesen Sie jede Frage sorgfältig
Wählen Sie die beste Antwort für jede Frage
Sie können das Quiz so oft wiederholen, wie Sie möchten
Ihr Fortschritt wird oben angezeigt

Sprache