🎚️CSS-Filter-Generator

Filter-Funktionen und Einheiten

Die CSS-Filter-Eigenschaft wendet Effekte auf Bilder oder Elemente an. Funktionen wie blur und sepia werden durch Leerzeichen getrennt hintereinander geschrieben.

• px (Pixel)：Die blur-Funktion gibt den Unschärferadius in px an. Bei 4px werden Farben im Bereich von 4 Pixeln Radius vermischt.
• % (Prozent)：Die brightness- und sepia-Funktionen geben die Effektstärke in % an. Bei brightness entspricht 100% der ursprünglichen Helligkeit und 120% bedeutet 20% heller.
• deg (Grad)：Die hue-rotate-Funktion gibt den Rotationswinkel auf dem Farbkreis in deg an. Bei 180deg verschiebt sich die Farbe zur gegenüberliegenden Position.

Warum ändert sich das Ergebnis je nach Reihenfolge?

Funktionen in filter werden von links nach rechts angewendet, wobei jede Funktion auf das Ergebnis der vorherigen angewendet wird. Dies kann zu unterschiedlichen Ergebnissen führen. Beispielsweise bleibt ein Brauchton übrig, wenn Graustufen vor Sepia angewendet werden, aber nicht wenn Sepia vor Graustufen angewendet wird. Dieses Tool hat eine feste Reihenfolge, aber Sie können den generierten CSS-Code bearbeiten, um die Reihenfolge zu ändern.

Unterschied zu backdrop-filter

filter und backdrop-filter verwenden die gleichen Funktionen, gelten aber für unterschiedliche Ziele.

• filter：filter wendet Effekte auf das Element selbst (Bilder, Text usw.) an.
• backdrop-filter：backdrop-filter wendet Effekte auf den Bereich hinter dem Element an und wird für Frosted-Glass-Effekte verwendet.