Kategorie: Entwicklung
CSS-Filter-Generator
Eine CSS-filter-Deklaration mit Live-Reglern erstellen
Passen Sie Weichzeichnung, Helligkeit, Kontrast, Graustufen, Farbtondrehung, Invertierung, Deckkraft, Sättigung und Sepia mit Reglern an, sehen Sie die kombinierte Wirkung live in der Vorschau und kopieren Sie die entstehende CSS-filter-Deklaration.
filter: none;
Alles auf dieser Seite wird in Ihrem Browser verarbeitet. Nichts wird hochgeladen.
Wozu dieses Werkzeug dient
Die CSS-Eigenschaft filter wendet grafische Effekte wie Weichzeichnung und Farbanpassung direkt im Browser an, ohne das Ausgangsbild zu bearbeiten. Mehrere Funktionen in einer Deklaration zu kombinieren ist von Hand mühsam zu schreiben – dieses Tool baut die Zeichenkette für Sie auf, während Sie jeden Effekt anpassen, und nimmt nur die Funktionen auf, die Sie tatsächlich verändert haben.
So funktioniert es
- Ziehen Sie die Regler, um jede Filterfunktion anzupassen.
- Beobachten Sie, wie sich die Vorschau live aktualisiert.
- Kopieren Sie die erzeugte filter-Deklaration in Ihr Stylesheet.
Datenschutz
Dieses Werkzeug läuft vollständig in Ihrem Browser. Ihre Eingabe wird nie hochgeladen, gespeichert oder weitergegeben – beim Schließen des Tabs ist sie weg.
Häufig gestellte Fragen
- Kann ich das auf ein Hintergrundbild statt auf ein Element anwenden?
- Ja – filter funktioniert auf jedem Element, auch solchen mit background-image. Um nur den Hintergrund hinter einem Element zu weichzeichnen (nicht dessen Inhalt), verwenden Sie stattdessen backdrop-filter.
- Wirkt sich filter auf die Performance aus?
- Komplexe oder animierte Filter, insbesondere Weichzeichnung, können bei großen Größen aufwendig zu rendern sein. Testen Sie auf den tatsächlichen Zielgeräten, bevor Sie einen animierten Filter ausliefern.
- Warum ist die Reihenfolge der filter-Funktionen wichtig?
- Jede Funktion wird auf die Ausgabe der vorherigen angewendet, sodass grayscale(100%) sepia(50%) anders aussehen kann als die umgekehrte Reihenfolge. Dieses Tool wendet sie in einer festen, sinnvollen Reihenfolge an.