Spielt die Reihenfolge der Filter eine Rolle?

Ja. CSS-Filter werden von links nach rechts angewendet, und viele sind nicht kommutativ. `filter: blur(8px) grayscale(100%)` zeichnet zuerst das farbige Bild weich und entsättigt dann; `grayscale(100%) blur(8px)` entsättigt zuerst und weicht dann das Graustufenbild. Der Unterschied ist bei den meisten Paaren subtil, bei Blur + Kontrast oder Blur + Drop-Shadow aber offensichtlich.

Warum ist filter so viel langsamer als Background-Tricks?

Filter zwingen den Browser, einen Off-Screen-Canvas zu reservieren, das Element dort zu rendern, den Filter-Shader auszuführen und das Ergebnis zu komponieren. Leichte Filter (Helligkeit, Kontrast, Sättigung) sind günstig; schwere (Blur, Drop-Shadow mit grossem Radius) können eine 60-fps-Animation auf 20 drücken. Filter nicht auf Elemente legen, die ständig animieren oder scrollen - einmal anwenden und komponieren lassen.

Unterschied zwischen filter und backdrop-filter?

`filter` wirkt auf das Element selbst - das Bild im ` ` oder den gemalten Inhalt eines ` `. `backdrop-filter` wirkt auf das, was *hinter* dem Element gerendert wird und durch dessen Hintergrund sichtbar ist. `filter` für Bildeffekte (Instagram-Style); `backdrop-filter` für Milchglas-Overlays über einem Bild. Der Glassmorphism-Generator deckt den zweiten Fall ab.

Kann man filter-Werte animieren?

Ja - `filter` ist in CSS-Transitions und Keyframe-Animationen animierbar. Jede Funktion interpoliert unabhängig, was man für Crossfades von scharf zu unscharf oder Farbe zu Graustufen will. Der Haken ist die Performance: Blur von 0 auf 24 Pixel zu animieren stresst die GPU der meisten Laptops. Auf dem langsamsten unterstützten Gerät testen.

Warum funktionieren meine Filter nicht auf dem Iframe-Inhalt?

Cross-Origin-Beschränkungen. CSS-Filter funktionieren auf gleichher Origin (eigene Seite, eigene SVGs und Bilder), aber der Browser weigert sich, Cross-Origin-Iframes oder Bilder ohne `Access-Control-Allow-Origin: *` zu filtern. Asset von der eigenen Domain ausliefern oder ein CORS-freundliches CDN nutzen.

CSS-Filter-Generator

Live-CSS-Filter-Playground mit Slidern für Blur, Helligkeit, Kontrast, Sättigung, Sepia, Graustufen, Invert, Hue-Rotate und Deckkraft.

Voreinstellungen

Weichzeichnen0px

Helligkeit100%

Kontrast100%

Sättigung100%

Sepia0%

Graustufen0%

Invertieren0%

Farbrotation0deg

Deckkraft100%

CSS

filter: none;

Vorschau

Slider für beliebige Kombinationen von CSS-Filter-Funktionen ziehen, die Vorschau aktualisiert sich live. Jeder Slider ist an eine Funktion gebunden (`blur(Npx)`, `brightness(N%)` usw.); die Ausgabe kombiniert sie in Quellreihenfolge, was zählt - Blur vor Graustufen sieht anders aus als Graustufen vor Blur. Presets bilden bekannte Instagram-Filter als Ausgangspunkt nach.

So funktioniert's

Preset wählen (oder überspringen)
Filter-Presets liefern in einem Klick einen Ausgangspunkt. Wer lieber von Null beginnt, überspringt.
Jede Funktion slidern
Blur, Helligkeit, Kontrast, Sättigung, Sepia, Graustufen, Invertieren, Hue-Rotate, Deckkraft - ein Slider pro Funktion.
Bei Bedarf umordnen
Funktionen stummschalten oder umsortieren, wenn das Ergebnis von der Reihenfolge abhängt (Blur + Graustufen).
CSS kopieren
Die kombinierte `filter:`-Deklaration steht bereit fürs Stylesheet.

Was ist das?

Die CSS-Eigenschaft `filter` legt einen grafischen Effekt (Blur, Farbverschiebung, Kontrast usw.) auf ein Element, bevor es komponiert wird. Es ist der moderne Web-Ersatz für Photoshops Einstellungsebenen und SVG-`<filter>`-Ketten - GPU-beschleunigt, wo möglich, deklarativ und stapelbar. Jede Funktion nimmt einen einzelnen Parameter (Länge für Blur, Prozentwert für die meisten Farbfunktionen, Winkel für Hue-Rotate) und liefert einen Effekt, der dem äquivalenten SVG-Filter-Primitive identisch ist.

Wann verwenden

Instagram-artige Bildfilter in CSS nachbauen, Hover-Zustände dimmen oder entsättigen, ohne das Bild zu tauschen, Foto-Galerien mit subtilem Blur auf inaktiven Thumbnails, Hintergrundbilder hinter Hero-Text dimmen, Bildern, die im Dark Mode ausgewaschen wirken, Helligkeit hinzufügen, und Asset-Debugging in einer Zeile (`filter: invert(1)`, um defekte Bilder zu finden).

Häufige Fehler

Zu viele Filter auf ein grosses Bild stapeln - die Performance bricht ein. `filter: blur()` für «atmende» Effekte auf Hero-Bildern animieren - selbst durchschnittliche Geräte ächzen. `filter` und `backdrop-filter` auf dasselbe Element legen (funktioniert, ist aber verwirrend). Vergessen, dass filter auch auf Kinder wirkt - ein Parent mit `filter: grayscale(1)` entsättigt jedes Kind, inklusive Video, selbst wenn das Kind farbig ist.

FAQ

Spielt die Reihenfolge der Filter eine Rolle?: Ja. CSS-Filter werden von links nach rechts angewendet, und viele sind nicht kommutativ. `filter: blur(8px) grayscale(100%)` zeichnet zuerst das farbige Bild weich und entsättigt dann; `grayscale(100%) blur(8px)` entsättigt zuerst und weicht dann das Graustufenbild. Der Unterschied ist bei den meisten Paaren subtil, bei Blur + Kontrast oder Blur + Drop-Shadow aber offensichtlich.
Warum ist filter so viel langsamer als Background-Tricks?: Filter zwingen den Browser, einen Off-Screen-Canvas zu reservieren, das Element dort zu rendern, den Filter-Shader auszuführen und das Ergebnis zu komponieren. Leichte Filter (Helligkeit, Kontrast, Sättigung) sind günstig; schwere (Blur, Drop-Shadow mit grossem Radius) können eine 60-fps-Animation auf 20 drücken. Filter nicht auf Elemente legen, die ständig animieren oder scrollen - einmal anwenden und komponieren lassen.
Unterschied zwischen filter und backdrop-filter?: `filter` wirkt auf das Element selbst - das Bild im `<img>` oder den gemalten Inhalt eines `<div>`. `backdrop-filter` wirkt auf das, was *hinter* dem Element gerendert wird und durch dessen Hintergrund sichtbar ist. `filter` für Bildeffekte (Instagram-Style); `backdrop-filter` für Milchglas-Overlays über einem Bild. Der Glassmorphism-Generator deckt den zweiten Fall ab.
Kann man filter-Werte animieren?: Ja - `filter` ist in CSS-Transitions und Keyframe-Animationen animierbar. Jede Funktion interpoliert unabhängig, was man für Crossfades von scharf zu unscharf oder Farbe zu Graustufen will. Der Haken ist die Performance: Blur von 0 auf 24 Pixel zu animieren stresst die GPU der meisten Laptops. Auf dem langsamsten unterstützten Gerät testen.
Warum funktionieren meine Filter nicht auf dem Iframe-Inhalt?: Cross-Origin-Beschränkungen. CSS-Filter funktionieren auf gleichher Origin (eigene Seite, eigene SVGs und Bilder), aber der Browser weigert sich, Cross-Origin-Iframes oder Bilder ohne `Access-Control-Allow-Origin: *` zu filtern. Asset von der eigenen Domain ausliefern oder ein CORS-freundliches CDN nutzen.