CSS Filter Generator

Einstellungen

Vorschau & CSS

CSS 
filter: none;

So wird's verwendet

  1. Bild hochladen oder Vorschau nutzen — Der Filter wird live auf das Vorschaubild angewendet.
  2. Regler anpassen — Blur, Helligkeit, Kontrast, Sättigung, Farbton, Sepia, Graustufen und Invertieren einzeln einstellen.
  3. Live-Vorschau prüfen — Alle Filteränderungen werden sofort in der Vorschau sichtbar.
  4. CSS kopieren — Auf „CSS kopieren" klicken, um die vollständige filter-Eigenschaft zu übernehmen.

Was ist CSS filter?

Die CSS-Eigenschaft filter wendet grafische Effekte auf ein Element an — wie Unschärfe, Farbverschiebung oder Helligkeitsanpassung — direkt im Browser, ohne Bildbearbeitungssoftware.

Mehrere Filterfunktionen können in einer Deklaration verkettet werden. Sie werden der Reihe nach angewendet und sind in modernen Browsern GPU-beschleunigt.

Häufige Anwendungsfälle

Bild-Hover-Effekte
Graustufen für deaktivierte Zustände
Bild-Dimmen im Dunkelmodus
Vintage/Sepia-Fotoeffekte
Verschwommene Hintergrundebenen
Farbgetönte UI-Overlays
Ladeanimationen
Hochkontrast-Barrierefreiheitsmodus

Tipps & Best Practices

Filter sorgfältig verketten

Die Reihenfolge ist wichtig. blur vor contrast ergibt ein anderes Ergebnis als umgekehrt. Experimentieren für einzigartige Effekte.

Performance

CSS-Filter lösen GPU-Compositing aus. Große blur()-Werte auf vollflächigen Elementen auf Mobilgeräten vermeiden.

Filter animieren

Alle Filterfunktionen sind transition-fähig. transition: filter 0.3s für sanfte Hover-Farb- oder Blur-Animationen verwenden.

Filter und Stapelkontexte

Ein angewendeter Filter erstellt einen neuen Stapelkontext, der den z-index von Kindelementen beeinflussen kann.

Häufig gestellte Fragen

Was ist der Unterschied zwischen filter und backdrop-filter?

filter wendet Effekte auf das Element und seinen Inhalt an. backdrop-filter wendet Effekte auf alles an, was hinter dem Element gerendert wird.

Kann ich mehrere Filter gleichzeitig verwenden?

Ja. Funktionen mit Leerzeichen trennen: filter: brightness(1.2) contrast(1.1) saturate(0.8);. Alle Funktionen werden der Reihe nach angewendet.

Funktioniert CSS filter auf SVG-Elementen?

Ja. CSS filter funktioniert auf inline SVGs und <img>-Tags mit SVGs in allen modernen Browsern.

Wie setze ich alle Filter zurück?

filter: none; entfernt alle angewendeten Filtereffekte von einem Element.