CSS-Filter-Generator

So funktioniert es

1. Filter-Regler anpassen: Verwenden Sie die Regler, um Unschärfe, Helligkeit, Kontrast, Sättigung, Farbton-Drehung, Deckkraft, Graustufen, Sepia und Invertierung zu steuern.
2. In Echtzeit ansehen: Das Beispielbild oder -element aktualisiert sich sofort, wenn Sie einen Regler bewegen.
3. CSS kopieren: Der vollständige filter-Eigenschaftswert (z. B. filter: brightness(1.2) contrast(1.5) saturate(0.8)) ist bereit, in Ihr Stylesheet eingefügt zu werden.

Warum den CSS-Filter-Generator nutzen?

Mit CSS-Filtern können Sie Bildverarbeitungs-Effekte wie Unschärfe, Kontrast, Helligkeit und Farbverschiebungen direkt im Browser anwenden, ohne Photoshop oder Bildbearbeitungssoftware. Sie funktionieren auf Bildern, Videos und jedem HTML-Element. Den filter-Eigenschafts-String von Hand zu schreiben, erfordert das Auswendiglernen exakter Funktionsnamen und gültiger Wertebereiche. Dieser Generator bietet intuitive Regler mit visuellem Feedback, sodass Sie genau das gewünschte Aussehen einstellen können.

Funktionen

• Alle CSS-filter-Funktionen: blur, brightness, contrast, saturate, hue-rotate, opacity, grayscale, sepia, invert und drop-shadow.
• Live-Vorschau: Sehen Sie Änderungen an einem Beispielbild oder Ihrem eigenen Bild in Echtzeit.
• Wertvalidierung: Die Regler erzwingen gültige Bereiche für jede Filter-Funktion.
• Einzelne Filter zurücksetzen: Setzen Sie einzelne Filter auf den Standardwert zurück, ohne andere zu beeinflussen.
• Kombinierte Ausgabe: Alle ausgewählten Filter werden zu einer einzigen filter-Eigenschaft kombiniert.

Häufige Fragen

Können CSS-Filter auf Videoelemente angewendet werden?

Ja. Die filter-Eigenschaft funktioniert auf jedem Element, einschließlich <video>, <img>, <div> und <canvas>. Bei einem Video wird der Filter während der Wiedergabe in Echtzeit gerendert.

Was ist der Unterschied zwischen filter und backdrop-filter?

filter wendet den Effekt auf das Element selbst und alle seine Kinder an. backdrop-filter wendet den Effekt auf den Inhalt hinter (unter) dem Element an, typisch für Mattglas-Effekte.

Beeinflussen CSS-Filter die Performance?

Filter mit Unschärfe oder komplexem Compositing können GPU-intensiv sein. Bei animierten Filtern stellen Sie sicher, dass das Element auf einer eigenen Compositing-Schicht liegt (fügen Sie als Hinweis transform: translateZ(0) hinzu). Statische Filter auf Bildern und Icons haben minimalen Performance-Einfluss.

Was CSS filter wirklich tut

Die CSS-Eigenschaft filter wendet grafische Effekte (Unschärfe, Kontrastanpassung, Farbverschiebung, Schlagschatten) auf ein Element und seine Kinder an, bevor der Browser es auf den Bildschirm zeichnet. Die Verarbeitung erfolgt vollständig in der Rendering-Pipeline des Browsers, normalerweise GPU-beschleunigt, ohne dass JavaScript beteiligt ist. Die Effekte sind rein visuell: das zugrunde liegende HTML, die Datei, auf die ein Bild verweist, und das Layout bleiben alle unverändert. Eine mit filter: grayscale(1) angezeigte Fotografie hat in der Datei immer noch ihre Originalfarben; der Browser konvertiert nur bei der Anzeige in Graustufen.

CSS filter stellt zehn Funktionen bereit: blur(px) für Gauß-Unschärfe, brightness(n) und contrast(n) für Tonwertanpassungen, saturate(n) für Farbintensität, hue-rotate(deg) zum Verschieben des Farbkreises, opacity(n) für Transparenz, grayscale(n) und sepia(n) für Entsättigungseffekte, invert(n) für negative Ausgabe und drop-shadow(...) für formbewusste Schatten (im Gegensatz zu box-shadow folgt drop-shadow der tatsächlich gerenderten Form einschließlich Transparenz, ideal für Schatten auf Symbolen oder PNG-Bildern mit Ausschnittsrändern). Funktionen werden verkettet: filter: brightness(1.2) contrast(1.3) saturate(0.9) wendet alle drei nacheinander an.

Warum das für modernes Webdesign wichtig ist: vor einem Jahrzehnt erforderte das Anpassen von Helligkeit, Farbton oder Sättigung für Design-Konsistenz das Vorverarbeiten jedes Bildes in Photoshop und das Reexportieren. CSS filter bringt die gleichen Anpassungen zur Laufzeit, nicht-destruktiv angewendet. Sie können ein einzelnes Bild bereitstellen und es je nach Thema, Hover-Status oder Benutzerpräferenz unterschiedlich präsentieren. Sie können Filter auch für Barrierefreiheit verwenden: ein invertiertes Graustufenfoto als Platzhalter oder ein abgedunkelter Bildüberlagerung für kontrastreiche Textlesbarkeit. Der Kompromiss ist die Leistung für einige Filter (besonders Unschärfe) und die Tatsache, dass Filter auch Kinder beeinflussen, was unerwartet kaskadieren kann.

Wie dieses Tool hinter den Kulissen funktioniert

Jeder Schieberegler im Tool ist an eine einzige Filterfunktion gebunden. Wenn Sie einen Schieberegler bewegen, liest JavaScript den Wert, konstruiert die Filterfunktionszeichenfolge mit diesem Wert (z. B. brightness(1.4)) und verkettet alle aktiven Funktionen zu einer einzigen filter-CSS-Zeichenfolge. Diese Zeichenfolge wird als Inline-Stil auf dem Vorschaubild angewendet, was sofortiges visuelles Feedback erzeugt, während der Browser mit dem neuen Filter neu zeichnet. In JavaScript werden keine Bilddaten verarbeitet: die eigentliche Pixel-Mathematik geschieht innerhalb der Rendering-Engine des Browsers, normalerweise auf der GPU.

Das generierte CSS, das im Code-Feld angezeigt wird, ist dieselbe Zeichenfolge, die auf die Vorschau angewendet wird. Klicken Sie auf «CSS kopieren» und das Tool schreibt diese Zeichenfolge in Ihre Zwischenablage mit der modernen navigator.clipboard.writeText()-API. Die Zeichenfolge ist bereit zum Einfügen in das Stilattribut eines beliebigen Elements oder in eine beliebige Klassendeklaration in Ihrem Stylesheet. Das Tool unterstützt auch das Laden Ihres eigenen Bildes: wählen Sie eine Datei und sie wird zu einer temporären blob:-URL im Browser, niemals irgendwohin hochgeladen, und der Filter wird in Ihrem tatsächlichen Bild vorschau, damit Sie das genaue Aussehen für Ihren Inhalt einstellen können.

Das Reset-Verhalten ist pro Filter: jeder Schieberegler hat seinen eigenen Reset-Button, der nur diesen Filter auf seinen Nicht-Effekt-Wert zurücksetzt (1 für Multiplikatoren, 0deg für hue-rotate, 0px für blur). Die «Alle zurücksetzen»-Schaltfläche setzt jeden Schieberegler gleichzeitig auf neutral. Der Zustand des Tools lebt nur im Speicher; aktualisieren Sie die Seite und Ihre Filterkombination ist weg. Kein Server speichert Ihre gewählten Filterwerte, keine Analyse verfolgt, welche Kombinationen Sie ausprobieren. Das Tool ist ein zustandsloser, werbeunterstützter CSS-Spielplatz.

Kurze Geschichte der CSS-Filter

• SVG-Filter-Primitive, 2001.SVG 1.0 (W3C-Empfehlung, September 2001) definiert ein umfassendes Filtersystem: feGaussianBlur, feColorMatrix, feConvolveMatrix und Dutzende mehr. Das SVG-Filtermodell ist leistungsstark aber wortreich, und das Anwenden von SVG-Filtern auf HTML-Elemente erfordert filter: url(#id) mit Verweis auf Inline-SVG, niemals weit verbreitet in HTML-First-Workflows.
• CSS Filter Effects Module Level 1, 2014.Das W3C veröffentlicht Filter Effects Module Level 1 (Dezember 2014) und führt die vereinfachten Kurzform-Filterfunktionen (blur, brightness, contrast, etc.) ein, die kein Inline-SVG erfordern. Diese entsprechen den häufigsten Bildverarbeitungsanforderungen in 95% der Fälle und sind dramatisch einfacher zu erstellen als SVG-Filter.
• Browser-Unterstützung erreicht kritische Masse, 2015.Chrome 53 (2015) und Firefox 35 (2015) liefern unpräfixierten filter-Support; Safari hat präfixierten Support seit Version 6 (2012). Bis 2015 ist CSS filter auf Produktionsseiten weitgehend verwendbar. Designer beginnen, Filter für Hover-Effekte, Bildnormalisierung und dekorative Behandlungen in großem Maßstab zu verwenden.
• backdrop-filter wird ausgeliefert, 2017 bis 2024.Safari 9 (2015) führt -webkit-backdrop-filter für Milchglaseffekte ein. Chromium liefert unpräfixiertes backdrop-filter in Chrome 76 (Juli 2019) aus. Firefox hält bis Version 103 (Juli 2022) durch. Die iOS-artige «Milchglas-Navigationsleiste» wird zu einem modernen Standard-UI-Muster.
• Dunkelmodus treibt Filter-Adoption voran, 2019.Der Dunkelmodus-Designtrend (Apples macOS Mojave 2018, Android 10 2019, iOS 13 2019, Browser prefers-color-scheme 2019) beschleunigt die Filter-Nutzung für invert-and-hue-rotate «Auto-Dark-Mode» CSS, bei dem eine einzelne filter: invert(1) hue-rotate(180deg)-Regel eine Hell-Modus-Site in eine akzeptable Dunkelmodus-Ansicht ohne Redesign verwandelt.
• SVG-Filter-Komplexität kehrt über CSS zurück, ab 2024.Das CSS Filter Effects Module Level 2 (Entwurf) schlägt neue Funktionen und die Fähigkeit vor, benutzerdefinierte Filter-Pipelines ohne Inline-SVG zu komponieren, und überbrückt die Lücke zwischen den praktischen Kurzform-Funktionen und der vollen Leistung der SVG-Filter-Primitive. Die Browser-Unterstützung wird im Laufe von 2025 weiter ausgerollt.

Reale Arbeitsabläufe

• Markenkonsistente Bildnormalisierung.Eine Site, die Bilder von vielen Fotografen oder Stock-Anbietern bezieht, erhält inkonsistente Sättigung, Kontrast und Helligkeit. Das Anwenden eines einheitlichen CSS-Filters auf alle Bilder (filter: saturate(0.85) contrast(1.05) brightness(0.95)) bringt sie alle in dieselbe Farbpalette ohne Vorverarbeitung jeder Datei. Kehren Sie den Filter für ein bestimmtes Bild um, wenn Sie möchten, dass es hervorsticht.
• Hover- und Interaktionszustände.Hover-Effekte mit Filter-Übergängen fühlen sich poliert und leicht an. Karten-Bilder mit filter: grayscale(0.5) in Ruhe und filter: grayscale(0) beim Hovern erzeugen eine subtile Einladung zur Interaktion. Bild-Miniaturansichten mit filter: brightness(0.9) in Ruhe und brightness(1.1) beim Hovern tun dasselbe, ohne zwei Bilddateien zu erfordern.
• Milchglas-UI mit backdrop-filter.Modale Überlagerungen, klebrige Navigationsleisten und Tooltip-Popovers mit backdrop-filter: blur(20px) über einem halbtransparenten Hintergrund erzeugen den iOS-artigen Milchglaseffekt. Dies wird jetzt auf modernen Marketing-Sites erwartet; filter trifft nicht zu, weil wir das verschwimmen lassen wollen, was hinter der Überlagerung ist, nicht die Überlagerung selbst.
• Dynamisches Theming und Dunkelmodus.Billiger Dunkelmodus: wickeln Sie Ihre Site in einen Container mit filter: invert(1) hue-rotate(180deg), der über Media Query oder Umschaltung aktiviert wird. Dies konvertiert dunklen Text in hell, helle Hintergründe in dunkel und bewahrt gleichzeitig die meisten Farben. Es ist ein schneller Gewinn, der 80% der Dunkelmodus-Anforderungen ohne das Entwerfen von zwei Themen erfüllt. Echte Bilder sollten mit einem verschachtelten filter: invert(1) hue-rotate(180deg) ausgeschlossen werden, um die Inversion rückgängig zu machen, sonst sehen Fotos seltsam aus.
• Barrierefreiheits-Tools und Hochkontrast-Modi.Benutzer mit Sehbehinderungen können Filter auf Browserebene anwenden (Chrome-Erweiterung mit hohem Kontrast, OS-Level-Inversion), aber Designer können auch Filter-Umschaltungen auf Site-Ebene anbieten: eine Schaltfläche, die filter: contrast(2) auf die gesamte Seite für Benutzer mit eingeschränktem Sehvermögen anwendet. WebAIM und WCAG erfordern dies nicht, aber es ist eine kostengünstige Barrierefreiheits-Höflichkeit, die einige Sites hinzufügen.
• Künstlerische Fotobehandlungen.Sepia-Töne, Vintage-Looks, Blueprint-Foto-Effekte und andere künstlerische Behandlungen kombinieren Filterfunktionen: filter: sepia(1) hue-rotate(200deg) saturate(1.5) brightness(0.8) erzeugt in einer Deklaration einen kühltönigen Vintage-Look. Im Vergleich zu Bildeditor-Vorgaben ist CSS filter nicht-destruktiv und live anpassbar ohne erneutes Exportieren.

Häufige Fallstricke und was sie bedeuten

• Unschärfe ist der teure Filter.Unter den Filterfunktionen ist blur() am GPU-intensivsten, besonders bei großen Radien (über 20px) auf großen Elementen. Das Animieren von Unschärfe oder das Anwenden auf viele Elemente gleichzeitig kann die Bildraten merklich senken. Für klebrige Milchglas-Navigationsleisten deckt die Unschärfe einen kleinen Bereich ab und läuft gut; für Vollbild-Modal-Unschärfen erwarten Sie ein kurzes Stottern auf Geräten der unteren Preisklasse. Andere Filter (contrast, brightness, saturate) sind auf modernen GPUs nahezu kostenlos.
• Filter wirken sich auf alle Nachkommen aus.Das Anwenden von filter auf einen Container betrifft jedes Kindelement darin. Wenn Sie eine Karte in einen Container mit filter: grayscale(1) wickeln, wird auch der Text darin in Graustufen (was sich normalerweise nicht ändert, da Text bereits monochrom ist) und alle farbigen Kindelemente (Symbole, Abzeichen) verlieren ihre Farbe. Um nur bestimmte Kinder zu filtern, wenden Sie den Filter einzeln auf sie an, nicht auf den Elternteil.
• Geringer Kontrast schadet der Lesbarkeit.Das Reduzieren des Kontrasts (filter: contrast(0.5)) auf einer Karte mit Text darin macht den Text schwerer zu lesen, oft fällt er unter das WCAG AA-Kontrastverhältnis von 4,5:1 für normalen Text. Wenden Sie kontrastreduzierende Filter vorsichtig an; überprüfen Sie, dass jeglicher Text darauf lesbar bleibt. Für rein dekorative Elemente (Hintergrundbilder, Trennlinien) ist reduzierter Kontrast in Ordnung.
• Filter ändern keine Klickflächen.Im Gegensatz zu clip-path ändert CSS filter nicht den anklickbaren Bereich eines Elements. Eine Schaltfläche mit filter: blur(5px) sieht weich und unscharf aus, ist aber immer noch über ihr ursprüngliches Rechteck vollständig anklickbar. Dies ist normalerweise erwünscht, kann aber überraschend sein, wenn ein «geisterhaftes» oder «deaktiviert aussehendes» Element beim Klicken immer noch auslöst. Kombinieren Sie filter mit pointer-events: none, um die Interaktion tatsächlich zu deaktivieren.
• Safari benötigt das -webkit-Präfix für backdrop-filter.Die Basis-Eigenschaft filter ist in allen modernen Browsern unpräfixiert. Aber backdrop-filter erfordert immer noch das -webkit-backdrop-filter-Präfix in Safari (auch neuere Versionen). Für browserübergreifende Milchglaseffekte deklarieren Sie sowohl -webkit-backdrop-filter als auch backdrop-filter mit dem gleichen Wert. Auto-Präfixer handhaben dies; wenn Sie CSS von Hand schreiben, denken Sie an das Präfix.
• Das Animieren von Filterketten ist ruckelig.CSS-Übergänge auf filter interpolieren glatt, wenn die Filterkette gleich bleibt (z. B. Übergang blur(0px) zu blur(10px)). Aber das Hinzufügen oder Entfernen von Funktionen mitten im Übergang (z. B. Übergang von blur(0px) zu blur(10px) brightness(1.2)) schnappt abrupt. Für glatte Multi-Filter-Übergänge deklarieren Sie alle Filter sowohl im Start- als auch im Endzustand mit den entsprechenden Basiswerten (brightness(1) ist die Standardeinstellung).

Datenschutz: alles geschieht in Ihrem Browser

CSS-Generator-Tools kommen in zwei Geschmacksrichtungen: einfache HTML-Seiten mit clientseitigem JavaScript (privat, schnell) und Cloud-Editoren, die Ihre Projekte speichern (kollaborativ aber mit Datenschutz-Kompromissen). Dieses Tool ist die erste Art. Ihre Schieberegler-Werte, Ihr generiertes CSS und sogar jedes Bild, das Sie zur Vorschau hochladen, bleiben vollständig in Ihrer Browser-Sitzung. Aktualisieren Sie die Seite, und der Zustand ist weg, es sei denn, Sie haben zuerst das CSS kopiert oder einen Screenshot gespeichert.

Die Funktion «laden Sie Ihr eigenes Bild hoch» verdient eine Datenschutznotiz: wenn Sie eine Datei auswählen, erstellt der Browser eine lokale blob:-URL, die auf den Speicher zeigt, und die Vorschau zeigt Ihr Bild mit dem angewendeten Filter an. Es geht keine Anfrage an einen Server. Öffnen Sie den Netzwerk-Tab des Browsers während des Uploads; Sie werden null ausgehenden Datenverkehr sehen. Das Bild existiert nur im Speicher Ihres Browser-Tabs und wird gelöscht, wenn Sie den Tab schließen. Für vertrauliche Bilder (proprietäre Designs, medizinische Scans, NDA-geschützte Screenshots) ist dies die Datenschutzeigenschaft, die zählt.

Wann ein anderes Tool die richtige Wahl ist

• Photoshop oder Lightroom für dauerhafte Bearbeitungen.CSS filter ist nur zur Anzeigezeit: die zugrunde liegende Bilddatei ist unverändert. Wenn Sie möchten, dass die eigentliche Bilddatei diese Anpassungen eingebrannt hat (kleinere Dateigröße, schnellere Seitenladevorgänge, kein Risiko ungefilterten Fallbacks in älteren Browsern), bearbeiten Sie das Bild in Photoshop, Lightroom, GIMP oder Affinity Photo. CSS filter ist für dynamische Anzeige; Bildeditoren sind für dauerhafte Verarbeitung.
• Image Filters für einmalige Stapelverarbeitung.Unser Image Filters-Tool wendet ähnliche Filtereffekte an, produziert aber eine herunterladbare PNG/JPG mit dem eingebrannten Filter. Für die konsistente Verarbeitung vieler Bilder für ein Portfolio, Social-Media-Set oder eine Asset-Bibliothek ist dieser Workflow schneller als das Anwenden von CSS-Filtern zur Laufzeit. Beide Tools bedienen unterschiedliche Anwendungsfälle.
• SVG-Filter für komplexe Effekte.CSS-Filter-Kurzformen decken die meisten Bedürfnisse ab, aber nicht alles. Wellige Verzerrung, benutzerdefinierte Faltungskerne (Kantenerkennung, Prägung), feTurbulence-Rauschmuster, Verschiebungskarten: alle erfordern SVG-Filter-Primitive über Inline-SVG plus filter: url(#myFilter). Das Erstellen von SVG-Filtern ist schwieriger, schaltet aber Effekte frei, die CSS-Filter-Kurzformen nicht produzieren können.
• CSS-benutzerdefinierte Eigenschaften für Theming.Der «invertierter Dunkelmodus»-Trick mit filter hat Einschränkungen: Fotos sehen falsch aus, Farben verschieben sich, die Leistung kann leiden. Für Produktionsqualitäts-Dunkelmodus sind CSS-benutzerdefinierte Eigenschaften (--bg-color, --text-color) mit zwei unterschiedlichen Themensets sauberer. Filterbasierter Dunkelmodus ist ein schneller Gewinn, keine polierte Lösung.

Weitere häufig gestellte Fragen

Kann ich CSS-Filter-Änderungen reibungslos animieren?

Ja, mit Einschränkungen. Die filter-Eigenschaft ist in CSS animierbar, und Übergänge zwischen zwei Filterketten mit den gleichen Funktionen in der gleichen Reihenfolge interpolieren reibungslos (blur(0px) brightness(1) zu blur(10px) brightness(1.5) funktioniert). Das Hinzufügen oder Entfernen von Funktionen mitten im Übergang schnappt abrupt. Für reibungslose Multi-Filter-Animationen listen Sie jede Funktion auf, die Sie übergehen möchten, sowohl im Start- als auch im Endzustand, und verwenden Sie neutrale Werte (brightness(1), saturate(1), blur(0px)), wo Sie keinen bestimmten Filter angewendet haben möchten.

Funktioniert CSS filter auf Hintergrundbildern?

Ja. CSS filter gilt für das gesamte Element einschließlich seines Hintergrundbildes, Inhalts und Kindelementen. Wenn Sie nur das Hintergrundbild filtern wollen, aber nicht den Vordergrundinhalt, ist der typische Ansatz, ein separates Kindelement für den Hintergrund zu verwenden (z. B. ein positioniertes ::before-Pseudoelement) mit dem angewendeten Filter und dann den Inhalt als ungefiltertes Geschwisterelement obenauf zu platzieren. Die backdrop-filter-Eigenschaft ist auch nützlich, wenn Sie filtern wollen, was hinter einem transparenten Element sichtbar ist.

Werden CSS-Filter von Suchmaschinen indiziert?

CSS-Filter sind rein visuell und ändern den HTML-Inhalt nicht. Suchmaschinen indizieren den zugrunde liegenden Inhalt (Bild-Alt-Text, umgebenden Text), als ob der Filter nicht angewendet wäre. Ein Graustufenbild mit filter: grayscale(1) wird immer noch als das ursprüngliche Farbbild basierend auf seiner Datei und seinem Alt-Text indiziert. Dies ist im Allgemeinen das, was Sie wollen: keine Filter-Nebenwirkungen auf SEO oder Screenreader.

Warum sieht drop-shadow anders aus als box-shadow?

Box-shadow zeichnet einen Schatten um den rechteckigen Kasten eines Elements und ignoriert jede Transparenz. Drop-shadow (filter) zeichnet einen Schatten, der der tatsächlich gerenderten Form folgt, einschließlich transparenter Bereiche. Für ein SVG-Symbol mit Ausschnittsrändern oder ein PNG mit Transparenz produziert drop-shadow einen formbewussten Schatten, der zur sichtbaren Umrissform passt. Box-shadow auf dem gleichen Element würde einen rechteckigen Schatten um den Begrenzungskasten zeigen, was falsch aussieht. Verwenden Sie drop-shadow für formbewusste Schatten, box-shadow für rechteckige Elemente.

Was ist der Unterschied zwischen opacity und filter: opacity()?

In den meisten Browsern produzieren sie visuell identische Ergebnisse. Der technische Unterschied: opacity ist eine Top-Level-Eigenschaft, während filter: opacity() Teil der Filterkette ist und mit anderen Filtern komponiert. Wenn Sie filter: blur(5px) opacity(0.5) haben, gelten beide zusammen als eine einzige GPU-Operation. Die Verwendung von opacity außerhalb der Filterkette funktioniert in den meisten Fällen gleich. Bleiben Sie bei opacity für eigenständige Transparenz; verwenden Sie filter: opacity() nur, wenn Sie mit anderen Filtern verketten.

Kann ich alle Filter schnell zurücksetzen?

Ja. Setzen Sie filter: none, um alle Filter in einer Deklaration zu entfernen. Dies ist der sauberste Weg zum Zurücksetzen, besonders für Hover-Zustände, in denen Sie alle Filtereffekte beim Hover-Out entfernen möchten. Alternativ setzen Sie jede Filterfunktion auf ihren neutralen Wert: filter: brightness(1) contrast(1) saturate(1) blur(0px) hue-rotate(0deg) grayscale(0) sepia(0) invert(0) opacity(1) ist funktional äquivalent zu filter: none, aber wortreicher.