CSS-Backdrop-Filter-Generator

Erstellen Sie Live-backdrop-filter-CSS, indem Sie die Schieberegler für neun Filterfunktionen ziehen: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate und sepia. Die Ausgabe gibt sowohl backdrop-filter als auch -webkit-backdrop-filter aus, damit der Effekt über moderne Browser hinweg funktioniert, und eine Glaskarte wird über einem anpassbaren Hintergrund gerendert, sodass Sie das Ergebnis beim Optimieren sehen.

1. Klicken Sie optional auf einen Preset (Frosted Glass, Dark Glass, Vintage, Inverted), um von einem kuratierten Look zu starten. 2. Ziehen Sie die Schieberegler im Bedienfeld Controls; jeder Filter erscheint nur im erzeugten CSS, wenn er vom Standard abweicht (z. B. brightness/contrast/saturate/opacity Standard 100, blur Standard 0). 3. Bearbeiten Sie das Feld Background mit einem beliebigen gültigen CSS-background-Wert (Verlauf, Bild-url, Farbe), um den Filter über unterschiedlichen Inhalten zu testen. 4. Klicken Sie auf Copy, um sowohl die backdrop-filter- als auch die -webkit-backdrop-filter-Deklaration zu kopieren.

blur 0–50px; brightness 0–200% (Standard 100); contrast 0–200% (Standard 100); grayscale 0–100%; hue-rotate 0–360deg; invert 0–100%; opacity 0–100% (Standard 100); saturate 0–200% (Standard 100); sepia 0–100%. Reset stellt jeden Schieberegler auf seinen Standard zurück. Filter auf ihrem neutralen Wert werden aus der Ausgabe weggelassen; wenn alle neutral sind, lautet die Ausgabe backdrop-filter: none.