CSS-Filter-Generator

Wende CSS-Filter live auf ein Bild an: Unschärfe, Helligkeit, Kontrast, Sättigung, Graustufen, Sepia, Farbton, Invertieren. Erhalte CSS-Code und gefiltertes Bild.

Kostenlos
Ohne Anmeldung
Kein Datei-Upload
Windows, Mac, Android, iPhone

Werkzeug wird geladen…

Über dieses Werkzeug

Stelle CSS-Filter an einem Beispielbild oder deinem eigenen Foto ein: Unschärfe, Helligkeit, Kontrast, Sättigung, Graustufen, Sepia, Farbtondrehung, Invertieren und Deckkraft, mit 10 fertigen Filtern (Vintage, Schwarz-Weiß, dramatisch…). Vergleiche mit dem Original, kopiere den Code oder speichere das gefilterte Foto.

Wann es hilft

Hover-Effekte

Ein Schwarz-Weiß-Bild, das beim Hover seine Farben zurückbekommt (grayscale(100%), dann none), ist ein eleganter Effekt für eine Galerie oder Partnerlogos.

Bilder vereinheitlichen

Derselbe dezente Filter auf allen Fotos einer Seite verleiht ihnen eine gemeinsame Stimmung, ohne die Dateien zu bearbeiten.

Schnelle Fotokorrekturen

Hell, satter oder sepia: Bearbeite ein Foto und speichere es, ohne Software zu installieren.

So funktioniert's

Wähle einen fertigen Filter oder stelle jeden Regler ein.
Teste das Ergebnis an deinem eigenen Foto.
Kopiere den CSS-Code oder speichere das gefilterte Foto.

So funktioniert es

Der Filtercode enthält nur Funktionen, die etwas verändern, in fester Reihenfolge. Die Vorschau ist das Bild selbst, auf das der Browser diesen Code anwendet.

Zum Speichern wird das Bild mit derselben Filterkette (der filter-Eigenschaft des Canvas) in Originalgröße bis 16 Millionen Pixel in ein Canvas gezeichnet und als PNG gespeichert. Nichts wird hochgeladen.

Tipps für beste Ergebnisse

Wenige, sanfte Filter: 110 % Kontrast und 120 % Sättigung reichen oft.
Unschärfe ist bei großen Bildern aufwendig zu animieren: Nutze sie lieber für statische Hintergründe.
Für Schwarz-Weiß-Logos, die beim Hover farbig werden, füge eine Transition auf filter hinzu.
hue-rotate verschiebt alle Farben: praktisch, um mehrere Farbvarianten einer Illustration zu erzeugen.

Häufige Probleme und Lösungen

Das gespeicherte Foto hat keinen Filter

Dein Browser wendet keine Canvas-Filter an (Safari vor Version 18). Nutze Chrome, Edge oder Firefox oder aktualisiere Safari.

Die Unschärfe läuft über den Bildrand

Unschärfe breitet sich über die Ränder aus. Setze das Bild in einen Container mit overflow: hidden.

Die Farben wirken nach dem Invertieren falsch

invert kehrt auch Hauttöne und Himmel um: Kombiniere es mit hue-rotate(180deg) für nähere Farbtöne.

Häufige Fragen

Welche Filter bietet CSS?

blur, brightness, contrast, saturate, grayscale, sepia, hue-rotate, invert und opacity. Sie lassen sich in einer einzigen filter-Eigenschaft verketten.

Spielt die Reihenfolge der Filter eine Rolle?

Ja, sie werden in der geschriebenen Reihenfolge angewendet. Das Werkzeug nutzt immer dieselbe Reihenfolge, damit Vorschau und Code übereinstimmen.

Was ist der Unterschied zu backdrop-filter?

filter verändert das Element selbst; backdrop-filter verändert, was dahinter liegt (Milchglas-Effekt). Der Code für beide wird angeboten.

Kann ich das gefilterte Bild behalten?

Ja: Mit deinem Foto erzeugt „Gefiltertes Foto speichern“ auf deinem Gerät ein PNG mit angewendeten Filtern.

Immer noch ein Problem?

Frag im Forum: Kategorie, Werkzeug, Datenblatt deines Geräts und Testergebnis werden automatisch ausgefüllt.