CSS-Filter-Generator

Bildfilter wie Helligkeit, Kontrast, Sättigung, Sepia, Blur und Drop-Shadow live auf ein eigenes Bild anwenden und CSS oder Tailwind kopieren.

Der CSS-Filter-Generator wendet Helligkeit, Kontrast, Sättigung, Graustufen, Sepia, Farbton, Invertierung, Unschärfe, Deckkraft und Drop-Shadow live auf ein Bild an. Du kannst ein eigenes Foto laden, Vorlagen wie Vintage oder Schwarzweiß nutzen, mit dem Original vergleichen und das Ergebnis als CSS, Tailwind-Klasse oder PNG übernehmen.

Eigenes Bild JPG, PNG, WebP, GIF oder SVG – bleibt auf deinem Gerät.

Helligkeit %

Kontrast %

Sättigung %

Farbton drehen °

Graustufen %

Sepia %

Invertieren %

Unschärfe px

Deckkraft %

Drop-Shadow

filter: none;

Die CSS-Filterfunktionen

Funktion	Neutralwert	Wirkung
`brightness()`	1	Heller über 1, dunkler darunter
`contrast()`	1	Mehr oder weniger Kontrast
`saturate()`	1	Farben kräftiger oder blasser
`grayscale()`	0 %	Schwarzweiß
`sepia()`	0 %	Bräunlicher Vintage-Ton
`hue-rotate()`	0deg	Dreht alle Farben im Farbkreis
`invert()`	0 %	Negativ
`blur()`	0	Weichzeichnen
`drop-shadow()`	–	Schatten, der der Form folgt

Für Milchglas-Effekte auf dem Hintergrund statt auf dem Element selbst nimmst du backdrop-filter, etwa im Glassmorphism-Generator. Wie Bilder für Menschen mit Farbsehschwäche wirken, zeigt der Farbenblindheit-Simulator.

Häufige Fragen

Spielt die Reihenfolge der Filter eine Rolle?

Ja. Die Filter werden nacheinander von links nach rechts angewendet. grayscale vor sepia ergibt zum Beispiel ein anderes Bild als umgekehrt. Der Generator nutzt eine feste, gängige Reihenfolge.

Was ist der Unterschied zwischen drop-shadow und box-shadow?

box-shadow folgt immer dem rechteckigen Rahmen des Elements. filter: drop-shadow() folgt der tatsächlichen Form, also auch transparenten Bereichen in PNGs und SVGs, etwa bei freigestellten Produkten oder Icons.

Wird mein Bild hochgeladen?

Nein. Das Bild wird nur in deinem Browser angezeigt und bearbeitet. Auch der Download entsteht lokal über ein Canvas-Element.

Kosten CSS-Filter Leistung?

Einfache Filter sind günstig. Große Unschärfe-Werte und Filter auf vielen oder großen Elementen können beim Scrollen und bei Animationen bremsen. Für dauerhaft veränderte Bilder ist es oft besser, das Bild selbst zu bearbeiten.

Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.