CSS-Filter-Generator
Erstellen Sie eine CSS-Filter- oder Backdrop-Filter-Deklaration mit visuellen Kontrollelementen.
CSS-Filter-Generator
Dieses Tool erstellt eine einsatzfreie CSS-Filter- (oder Backdrop-Filter-) Deklaration aus einer Reihe von visuellen Kontrollelementen, sodass Sie sich nicht die Syntax zum Kombinieren von Unschärfe, Helligkeit, Kontrast, Graustufen, Farbton-Rotation, Invertieren, Deckkraft, Sättigung, Sepia und Drop-Shadow in einer Eigenschaft merken müssen. Es richtet sich an alle, die ein Fotogalerie, einen Hover-Effekt, ein Frosted-Glass-Panel oder eine thematische Bildbearbeitung gestalten, ohne die Filterfunktionsliste von Hand zu schreiben.
Jede Funktion hat ein eigenes Feld, und der generierte Wert listet nur die auf, die Sie tatsächlich geändert haben – so bleibt eine Seite mit nur einer kleinen Unschärfe kurz, anstatt neun No-Op-Funktionen aufzulisten. Das Feld zur Funktionsreihenfolge steuert die Reihenfolge ihrer Ausführung, da CSS-Filter von links nach rechts angewendet werden und eine Neuanordnung (Unschärfe vor oder nach der Kontrastanpassung) das visuell unterschiedliche Ergebnis verändern kann. Zwei Voreinstellungen – Vintage und Schwarz & Weiß – setzen auf einmal eine ganze Gruppe von Werten für ein häufiges Aussehen. Schalten Sie "Backdrop-Filter" um, um zu filtern, was hinter einem Element sichtbar ist, anstatt das Element selbst – die Standardwahl für Glasmorphismus-Panels – und wechseln Sie das Ausgabeformat, um statt einer einfachen CSS-Zeile eine Tailwind-Klasse mit beliebigem Wert zu erhalten.
Numerische Felder werden automatisch auf sinnvolle Bereiche begrenzt, sodass ein versehentlich großer oder negativer Wert die Ausgabe nie beschädigt; das Schattenfarbenfeld akzeptiert jeden CSS-Farbwert. Das Ergebnis wird live aktualisiert, wenn Sie eine Option anpassen, und die Summe über der Ausgabe zählt, wie viele Funktionen tatsächlich aktiv sind.
Alles läuft lokal in Ihrem Browser – niemand, den Sie hier eingeben, wird hochgeladen oder irgendwo hin gesendet. Kopieren Sie das Ergebnis, laden Sie es als .txt-Datei herunter, oder senden Sie es an die Eingabe eines anderen Tools, um damit weiterzuarbeiten.