CSS Filter Generator

Den Filter-Generator bedienen

1. Bewege jeden Schieberegler - Unschärfe, Helligkeit, Kontrast, Graustufen, Farbton-Rotation, Invertierung, Deckkraft, Sättigung, Sepia - um die entsprechende Filterfunktion anzuwenden. Jeder Filter hat einen vernünftigen Standard, der eine No-Op darstellt; ihn dort zu belassen, schließt ihn aus der Ausgabe aus.
2. Verkette Filter implizit. Jeder Schieberegler, der sich von seinem neutralen Wert unterscheidet, trägt zum finalen filter: f1(x) f2(y)-String bei. Filter werden von links nach rechts angewendet, sodass grayscale(1) sepia(1) einen warmeren Duoton ergibt als sepia(1) grayscale(1).
3. Beobachte das Vorschaubild. Derselbe Filter-Stack wird auf ein Beispielbild angewendet und durch ein einfaches style-Attribut gerendert - was du siehst, ist buchstäblich das, was der Browser auf deiner Produktionsseite malen wird.
4. Klicke "Alle zurücksetzen" um jeden Schieberegler auf seinen Standard-(Identitäts-)Wert zurückzusetzen, wenn du von vorne beginnen möchtest.
5. CSS kopieren. Füge die filter-Deklaration auf ein beliebiges HTML-Element ein - Bilder, Divs, Videos, SVG, sogar Inline-Text.

Wie die Filter-Pipeline ausgeführt wird

CSS filter ist in Filter Effects Module Level 1 definiert und bildet auf eine Reihe von SVG-äquivalenten Filterprimitive (feGaussianBlur, feColorMatrix, feComponentTransfer, feOffset) ab. Wenn der Browser filter: blur(4px) grayscale(1) sieht, konstruiert er einen In-Memory-Filtergraphen, rastert das Element in einen Offscreen-Puffer, führt die Filterprimitive der Reihe nach gegen diesen Puffer aus und kompositiert das Ergebnis zurück auf die Seite. Jede eingebaute Funktion - Unschärfe, Helligkeit, Kontrast, Graustufen, Farbton-Rotation, Invertierung, Deckkraft, Sättigung, Sepia und der Kurzhand-Schlagschatten - entzuckert zu einem dieser Primitive mit voreingestellten Argumenten.

Entscheidend ist, dass Filter das Element auf seine eigene Compositor-Schicht zwingen und es offscreen rendern, bevor der Filter angewendet wird, was zwei Konsequenzen hat. Erstens werden Filter in jedem modernen Browser GPU-beschleunigt, weil der Offscreen-Durchlauf auf der GPU läuft. Zweitens ändert sich der Containing-Block für Nachkommen: position: fixed-Kinder werden vom gefilterten Vorfahren eingefangen, eine Überraschung, die Leute beim Migrieren von Seiten trifft. Große Unschärferadien sind der kostspielige Fall - eine 30px-Unschärfe auf einem Vollbild-Element kann Animationen auf mobilen Geräten mittlerer Klasse auf 30fps senken. Der "Paint"- und "Composite Layers"-Eintrag in Chrome DevTools' Performance-Tab zeigt die Kosten.

Reale Fälle, wo filter seinen Wert zeigt

• Hero-Foto-Waschen - brightness und saturate kombinieren, um ein Foto in Richtung der Markenpalette zu tönen, ohne die Quelldatei zu bearbeiten.
• Hover-Zustände auf Produktbildern - ein subtiles brightness(1.05) oder saturate(1.1) beim Hover signalisiert Interaktivität ohne zusätzliche Assets.
• Deaktivierte UI-Zustände mit grayscale(1) opacity(0.6) anstelle von handgefertigten deaktivierten Stilen auf jeder Steuerung.
• Verschwommene modale Hintergründe, über Seiteninhalt geschichtet (oft kombiniert mit backdrop-filter).
• Duoton-Hero-Bilder - grayscale(1) sepia(1) hue-rotate(200deg) ergibt kostenlos einen blauen Duoton.
• Druckoptimierte Versionen - wende grayscale(1) in einer @media print-Regel an, um das Schwarzweiß-Drucken von farbigen Infografiken zu erzwingen.

Edge Cases und Fallstricke

• position: fixed innerhalb gefilterter Elemente hört auf, fixiert zu sein. Filter erstellen einen Containing-Block gemäß Filter Effects Level 1, sodass fixierte Nachkommen mit dem gefilterten Vorfahren scrollen. Bewege sie aus dem gefilterten Teilbaum heraus.
• Verschwommene Ränder lecken über die Box. Eine 10px-Unschärfe erstreckt sich in alle Richtungen um 10px; das Zuschneiden mit overflow: hidden stoppt das Lecken, schneidet aber auch die Unschärfe selbst ab, was normalerweise schlechter aussieht als jedes Extrem. Füge dem gefilterten Container Padding hinzu oder akzeptiere den erweiterten Bereich.
• Backdrop-filter ist eine andere Eigenschaft. filter beeinflusst die eigenen Pixel des Elements; backdrop-filter beeinflusst, was hinter dem Element ist. Sie nehmen dieselbe Funktionssyntax, haben aber unterschiedliche Kompatibilitätsprofile und erscheinen oft zusammen auf Modals.
• Hue-rotate über 360 umschlingt. hue-rotate(540deg) ist äquivalent zu hue-rotate(180deg). Das ist erwartet, überrascht aber oft Leute, die Rotation kontinuierlich animieren - verwende 360deg als Obergrenze für einen einzelnen Zyklus.
• Mehrere invert()-Aufrufe heben sich nicht perfekt auf. Weil jeder Filter auf der gerasterten Ausgabe des vorherigen läuft, ist invert(1) invert(1) nah an, aber nicht identisch mit, der Identität auf Anti-Aliased-Rändern. Vermeide das Verdoppeln von Filtern, die sich aufheben sollten.
• Text wird unter jedem Filter etwas weicher. Die Offscreen-Rasterung bei der Paint-Auflösung des Elements bedeutet, dass Subpixel-Text-Antialiasing verloren geht. Überschriften und Fließtext sind noch lesbar; dünne Serifenschriftarten in kleinen Größen können marginal unschärfer wirken.

Spezifikation und Kompatibilität

CSS filter stammt aus Filter Effects Module Level 1. Es nutzt bewusst SVG-Filterprimitive, um das Neuerfinden von Bildverarbeitungsmathematik zu vermeiden, und jede Kurzfunktion ist formal äquivalent zu einer benannten Kombination. Browserunterstützung laut caniuse.com/css-filters: Chrome 53+, Firefox 35+, Safari 9.1+, Edge 13+ - im Wesentlichen universell seit 2016. Das nicht verwandte backdrop-filter-Attribut hat etwas engere Abdeckung - es benötigten -webkit- in Safari bis Version 14. Die Spezifikation definiert auch filter: url(#id), um einen beliebigen SVG-<filter> zu referenzieren, was du verwendest, um benutzerdefinierte feTurbulence, feMorphology oder Bezier-Kurven-Komponenten-Transfers anzuwenden - Dinge, die nicht mit den eingebauten Kurzfunktionen ausdrückbar sind.

CSS-Filter vs. Bildbearbeitungs-Workflows

Das meiste, was filter tut, kann auch zur Export-Zeit aus Figma oder Photoshop in Bild-Assets eingebracht werden. Der Live-Filter-Ansatz gewinnt, wenn du Theming (Dark-Mode-Duoton über eine einzelne CSS-Variable), Hover-Interaktionen, Animationen oder benutzerkonfigurierbare Effekte benötigst. Er verliert, wenn du präzise Farbwissenschaft für druckgebundene Bilder oder konsistentes Aussehen über Nicht-CSS-Viewer (RSS, AMP, E-Mail-Clients) benötigst. Für animierte Filtereffekte ist filter mit @keyframes viel günstiger als das erneute Rendern eines Bildes auf einem Canvas in jedem Frame, und es bleibt bei jeder DPR scharf. Für fotografische Farbgradierung liefert Adobe Camera Raw noch bessere Ergebnisse. Und wenn du Filter jenseits der Kurzfunktionen benötigst - selektive Farbe, Tonkurven, Faltungs-Unschärfen - fall auf einen SVG-<filter> mit expliziter feColorMatrix zurück, den filter: url() gerne referenziert.