6XC

CSS-Filter-Generator

Mischen Sie blur, brightness, contrast, grayscale, hue-rotate, saturate, sepia und invert mit Live-Vorschau.

1.019 Aufrufe

6XC

Die Eigenschaft filter

filter wendet Bildbearbeitungseffekte auf jedes Element an — Fotos, Videos, sogar ganze Layouts. Funktionen werden in einer Deklaration verkettet: filter: brightness(110%) contrast(120%) saturate(130%) ergibt einen kräftigen "Instagram"-Look, grayscale(100%) ist der klassische Schwarzweiß-Stil, und hue-rotate färbt Grafiken um, ohne neue Assets zu benötigen.

Häufig gestellte Fragen

Beeinflusst filter die Leistung?

Die meisten Filter sind GPU-beschleunigt und bei wenigen Elementen unproblematisch. Blur ist am teuersten — halten Sie den Radius bei großen Flächen klein, besonders auf Mobilgeräten.

Was ist der Unterschied zwischen filter und backdrop-filter?

filter beeinflusst das Element selbst und seinen Inhalt; backdrop-filter beeinflusst das, was hinter dem Element sichtbar ist — genau das nutzt Glasmorphismus.

Ähnliche Tools

CSS-Farbverlauf-Generator Gestalten Sie lineare, radiale und konische CSS-Farbverläufe mit Live-Vorschau und kopieren Sie den Code. Erstellen CSS-Box-Shadow-Generator Gestalten Sie einen box-shadow visuell — Versatz, Unschärfe, Ausdehnung, Farbe, Deckkraft und Inset — mit Live-Vorschau. Erstellen CSS Border-Radius-Generator Runden Sie jede Ecke einzeln oder alle zusammen, in px oder %, mit Live-Vorschau und kopierbarem CSS. Erstellen CSS Text-Schatten-Generator Gestalten Sie einen text-shadow mit Versatz, Unschärfe, Farbe und Deckkraft — Live-Vorschau an Beispieltext. Erstellen