CSS Filter Generator
Erstellen Sie CSS-Bildfiltereffekte visuell — Blur, Helligkeit, Kontrast, Graustufen und mehr.
① Schieberegler für Filter anpassen ② Bild hochladen zum Vorschau ③ CSS kopieren
Vorlagen
filter: none
1x
1x
1x
0
0
0px
0°
0
1
CSS-Ausgabe
filter: none;
backdrop-filter (Glasmorphismus)
backdrop-filter: none;
Was ist die CSS filter-Eigenschaft?
Die CSS-Eigenschaft filter wendet grafische Effekte auf beliebige HTML-Elemente an — Bilder, Divs, Videos, SVGs oder ganze Seitenabschnitte. Sie unterstützt neun Funktionen: blur(), brightness(), contrast(), grayscale(), sepia(), hue-rotate(), invert(), opacity() und saturate(). Mehrere Filter werden leerzeichengetrennt verkettet: filter: brightness(1.2) contrast(1.1) grayscale(0.3) — die Reihenfolge ist wichtig. Die Eigenschaft ist GPU-beschleunigt. Hinweis: filter erstellt einen neuen Stapelkontext, der das z-index-Verhalten beeinflussen kann.
Häufig gestellte Fragen
Die CSS filter-Eigenschaft wendet visuelle Effekte auf Elemente an: blur, brightness, contrast, grayscale, sepia, hue-rotate, invert, opacity und saturate.
Ja. CSS filter funktioniert auf jedem HTML-Element. Hinweis: filter erstellt einen Stapelkontext, der das z-index-Verhalten beeinflussen kann.
Mehrere Filterfunktionen durch Leerzeichen getrennt: filter: brightness(1.2) contrast(1.1) blur(2px). Die Reihenfolge ist wichtig.
hue-rotate(Ndeg) verschiebt alle Farben um N Grad auf dem Farbkreis. 0deg = keine Änderung, 180deg invertiert Farbtöne.
CSS filter bietet einfache Standardeffekte. SVG filter ist mächtiger mit beliebigen Compositing-Operationen.
CSS-Filter aktivieren GPU-Compositing. blur() ist am teuersten — große Blur-Werte auf großen Elementen können die Frame-Rate senken.
Kombinieren: filter: sepia(0.5) contrast(1.2) brightness(1.05). Schwarz-Weiß: filter: grayscale(1) contrast(1.1).