CSS Filter Generator

Über dieses Tool

Der CSS-Filtergenerator ermöglicht die visuelle Anpassung von neun CSS-Filterfunktionen — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate und sepia — und die Anzeige des kombinierten Effekts in Echtzeit.

CSS-Filter wenden visuelle Effekte auf HTML-Elemente an, ähnlich wie Bildbearbeitungssoftware. Sie sind GPU-beschleunigt und funktionieren für Bilder, Hintergründe, Text und beliebige HTML-Elemente.

Anleitung

1. Ziehen Sie einen Schieberegler, um diesen Filtereffekt anzuwenden.
2. Kombinieren Sie mehrere Filter — die Vorschau aktualisiert sich live.
3. Filter mit Standardwerten werden automatisch aus der Ausgabe ausgeschlossen.
4. Klicken Sie auf „Alles zurücksetzen", um zu den Standardwerten zurückzukehren.
5. Klicken Sie auf Kopieren, um die CSS-filter-Eigenschaft zu kopieren.

Anwendungsfälle

Designer verwenden Graustufen- und Sepia-Filter für monochromatische UI-Bereiche. Entwickler nutzen Blur für Milchglas-Hintergründe. Hover-Effekte nutzen häufig brightness. Dunkelmodus-Implementierungen verwenden invert-Filter.

Häufige Fragen

• Was ist der Unterschied zwischen filter und backdrop-filter? — filter gilt für das Element selbst und alle seine Kinder. backdrop-filter gilt nur für den Bereich hinter dem Element (nützlich für Milchglas-Overlays).
• Kann ich mehrere Filter kombinieren? — Ja. Listen Sie sie durch Leerzeichen getrennt in der filter-Eigenschaft auf. Dieses Tool erledigt das automatisch.
• Beeinflussen CSS-Filter die Performance? — Einfache Filter wie grayscale und brightness sind günstig. Blur ist teurer, besonders bei großen Flächen — verwenden Sie es sparsam auf mobilen Geräten.