In diesem Artikel
Die CSS-Eigenschaft filter erklärt
Die CSS-Eigenschaft filter wendet grafische Effekte wie Weichzeichnen, Helligkeit, Kontrast und Farbverschiebungen auf jedes HTML-Element an. Sie funktioniert bei Bildern, Hintergründen, Text und sogar ganzen Seitenabschnitten. Filter werden von der GPU des Browsers verarbeitet, was sie für visuelle Echtzeiteffekte effizient macht – ganz ohne Bildbearbeitungssoftware.
CSS bietet neun integrierte Filterfunktionen: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate und sepia. Diese lassen sich in einer einzigen filter-Deklaration verketten, um komplexe visuelle Effekte zu erzeugen. Die Reihenfolge der Filter spielt eine Rolle – jede Funktion verarbeitet das Ergebnis der vorherigen.
Wie jede Filterfunktion arbeitet
Jede Filterfunktion nimmt einen einzelnen Wert entgegen und transformiert die visuelle Ausgabe des Elements. Wenn Sie verstehen, was jede Funktion bewirkt, können Sie sie gezielt kombinieren, um den gewünschten Look zu erzielen.
- blur(px) – wendet einen Gaußschen Weichzeichner an, sodass das Element unscharf erscheint. Höhere Werte erzeugen eine stärkere Unschärfe. Nützlich für Hintergrund-Overlays und Milchglaseffekte
- brightness(%) und contrast(%) – brightness skaliert die Gesamthelligkeit (100 % bleibt unverändert, 200 % verdoppelt sie), während contrast den Unterschied zwischen hellen und dunklen Bereichen anpasst. Zusammen steuern sie den Tonwertumfang des Bildes
- grayscale(%), sepia(%) und hue-rotate(deg) – grayscale entfernt die Farbsättigung, sepia fügt einen warmen bräunlichen Ton hinzu, und hue-rotate verschiebt alle Farben um die angegebene Gradzahl entlang des Farbkreises
Kostenlos testen – keine Registrierung erforderlich
CSS-Filter generieren →Effekte im Instagram-Stil erstellen
Durch das Stapeln mehrerer CSS-Filterfunktionen lassen sich beliebte Fotofiltereffekte vollständig im Code nachbilden. Diese Effekte werden in Echtzeit angewendet und funktionieren bei jedem Bildelement, ohne die Quelldatei zu verändern.
- Vintage-Look – kombinieren Sie sepia(60%) mit contrast(110%) und brightness(90%), um einen warmen, verblichenen Fotoeffekt zu erzeugen, der an alte Filmkameras erinnert
- Schwarz-Weiß – verwenden Sie grayscale(100%) mit contrast(120%) für einen kontrastreichen Monochromeffekt. Fügen Sie brightness(110%) für einen helleren, klareren Schwarz-Weiß-Look hinzu
- Dramatische Stimmung – stapeln Sie contrast(150%) mit saturate(130%) und brightness(80%) für eine kräftige, abgedunkelte Atmosphäre, in der Farben vor tiefen Schatten hervorstechen
Häufig gestellte Fragen
Kann ich SVG-Filter mit der CSS-Eigenschaft filter verwenden?
Ja. Mit der url()-Funktion innerhalb von CSS filter können Sie eigene SVG-Filterdefinitionen für Effekte referenzieren, die über die integrierten Funktionen hinausgehen. Das ermöglicht fortgeschrittene Effekte wie Displacement-Maps, Farbmatrizen und benutzerdefinierte Faltungskerne. SVG-Filter sind allerdings komplexer zu erstellen und werden von Browsern etwas schlechter unterstützt als die integrierten CSS-Filterfunktionen.
Beeinträchtigen CSS-Filter die Performance?
CSS-Filter sind in modernen Browsern GPU-beschleunigt, was sie für die meisten Anwendungsfälle effizient macht. Einzelne Filter auf Bildern haben minimale Auswirkungen auf die Performance. Das Anwenden von Weichzeichnern auf große Flächen, das gleichzeitige Animieren mehrerer Filter oder der Einsatz von Filtern auf Elementen mit komplexem Layout kann jedoch auf leistungsschwachen Geräten zu Framedrops führen. Testen Sie auf Mobilgeräten, bevor Sie live gehen.
Können Filter beim Hovern animiert werden?
Ja. CSS-Filter harmonieren nahtlos mit Transitions und Animationen. Ein gängiges Muster ist, standardmäßig einen grayscale- oder blur-Filter anzuwenden und beim Hovern zum ursprünglichen Look überzugehen. Zum Beispiel: filter: grayscale(100%); transition: filter 0.3s; mit filter: none bei :hover. Das erzeugt sanfte, GPU-beschleunigte Hover-Effekte.