CSS-Filter-Generator
Erstelle CSS-Filtereffekte visuell. Passe Unschärfe, Helligkeit, Kontrast, Graustufen, Farbton-Rotation, Invertierung, Deckkraft, Sättigung und Sepia mit Live-Vorschau an. Kostenlos.
Oder ziehe ein Bild auf die Vorschau
Referenz
Was ist die CSS-Filter-Eigenschaft?
Die CSS-Eigenschaft filter wendet grafische Effekte wie Unschärfe, Farbverschiebung und Kontrastanpassung auf ein Element an. Filter werden angewendet, bevor das Element zusammengesetzt wird, und betreffen das gesamte Element einschließlich Rahmen und Schatten. Mehrere Filterfunktionen können in einer einzigen Deklaration verkettet werden.
Alle CSS-Filterfunktionen
blur(px): Wendet eine Gaußsche Unschärfe an. Höhere Werte = mehr Unschärfe.
brightness(%): Passt die Helligkeit an. 100% = Original, 0% = komplett schwarz.
contrast(%): Passt den Kontrast an. 100% = Original, 0% = komplett grau.
grayscale(%): Konvertiert zu Graustufen. 0% = Original, 100% = vollständig grau.
hue-rotate(deg): Rotiert Farben im Farbkreis. 0deg = Original, 180deg = gegenüberliegende Farbtöne.
invert(%): Invertiert Farben. 0% = Original, 100% = vollständig invertiert.
opacity(%): Passt die Transparenz an. 100% = vollständig deckend, 0% = vollständig transparent.
saturate(%): Passt die Farbsättigung an. 100% = Original, über 100% = übersättigt.
sepia(%): Wendet einen Sepia-Ton an. 0% = Original, 100% = vollständig Sepia.
Leistungsaspekte
CSS-Filter sind in modernen Browsern GPU-beschleunigt. Das Anwenden von Filtern auf große Bereiche oder das Animieren von Filterwerten kann jedoch Neuzeichnungen verursachen. Für beste Leistung: Verwende will-change: filter bei animierten Elementen und bevorzuge backdrop-filter, wenn du nur den Hintergrund eines Elements unscharf machen möchtest.
Häufige Anwendungsfälle
Bild-Hover-Effekte — Graustufen im Ruhezustand, Farbe beim Überfahren.
Deaktivierter Zustand — filter: grayscale(100%) opacity(50%) für deaktivierte UI-Elemente.
Dunkelmodus — filter: invert(1) hue-rotate(180deg) als schneller Dunkelmodus-Trick.
Hintergrund-Unschärfe — backdrop-filter: blur(10px) für Milchglas-Overlays.
Vintage-Foto — Sepia, Kontrast und Helligkeit kombinieren für analogen Film-Look.
Datenschutz
Die gesamte Filtergenerierung läuft zu 100% in deinem Browser. Es werden keine Daten an einen Server gesendet. Hochgeladene Bilder verbleiben auf deinem Gerät.