CSS-Filter-Generator

CSS-Filtereffekte mit Schiebereglern und visuellen Voreinstellungen anwenden und voranzeigen

Was ist das und wie funktioniert es?

CSS-Filter wenden visuelle Effekte auf Bilder, Hintergründe und ganze HTML-Elemente mit GPU-beschleunigtem Rendering an. Die filter-Eigenschaft akzeptiert eine oder mehrere Funktionen: blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia() und drop-shadow().

Dieser Generator bietet Live-Schieberegler für jede Filterfunktion mit Echtzeit-Vorschau. Die Ausgabe ist eine CSS-filter-Eigenschaftsdeklaration zum Einfügen.

Anwendungsfälle

• Instagram-Stil: saturate(1.3), contrast(1.1) und brightness(1.05) kombinieren für einen lebendigen Fotoeffekt.
• Dark-Mode-Bilder: invert(1) hue-rotate(180deg) auf Bilder im Dunkelmodus anwenden.
• SVG-Icons umfärben: Ein schwarzes Icon mit filter: invert(1) sepia(1) saturate(5) hue-rotate(200deg) in eine Markenfarbe verwandeln.

Häufige Fragen

Was ist der Unterschied zwischen filter und backdrop-filter?

filter gilt für das Element und seinen Inhalt. backdrop-filter gilt nur für den Bereich hinter dem Element — für Milchglas-Effekte.

Beeinflussen CSS-Filter die Performance?

Filter sind in modernen Browsern GPU-beschleunigt. Das Animieren von Filtern auf großen Elementen kann zu Ruckeln führen.

Kann ich filter auf Hintergrundbilder anwenden?

filter gilt für das gesamte Element. Um nur das Hintergrundbild zu filtern, in einem ::before Pseudo-Element platzieren.

Was macht hue-rotate genau?

hue-rotate verschiebt alle Farben um den Farbkreis. 0deg = keine Änderung; 180deg = Komplementärfarben; 360deg = Original.

CSS

Box-Shadow-Generator · Border-Radius-Generator · Flexbox-Generator · CSS-Grid-Generator · Text-Shadow-Generator · CSS-Animations-Generator