Sind CSS-Filter performant?

Die meisten Filter werden vom Browser hardwarebeschleunigt. Große „blur“-Werte oder die Anwendung vieler Filter auf große Bilder können jedoch die Scroll-Performance auf weniger leistungsstarken Geräten beeinträchtigen.

Welchen Browser-Support kann ich erwarten?

Moderne Browser unterstützen CSS-Filter hervorragend. Bei älteren Umgebungen wie Internet Explorer werden diese Effekte herabgestuft und einfach nicht angezeigt.

Kann ich mehrere Filter gleichzeitig anwenden?

Ja. Das Tool kombiniert alle aktiven Werte zu einer einzigen `filter`-Eigenschaftszeichenfolge, was die Standardmethode ist, um mehrere Effekte in CSS zu verketten.

Farbe & Design

CSS Filter Generator

Q: Welche Filter kann ich hier generieren?

Sie können die Einstellungen für „blur“, „brightness“, „contrast“, „grayscale“, „hue-rotate“, „invert“, „opacity“, „saturate“ und „sepia“ anpassen.

Live preview blur, brightness, hue-rotate and more.

Runs in your browser

Blur0pxBrightness100%Contrast100%Grayscale0%Hue rotate0°Invert0%Opacity100%Saturate100%Sepia0%

CSS

.filtered {
  filter: none;
}

Anmerkung der Redaktion

Understanding · Eight functions, one GPU-shader.

Dieses ausführliche Kapitel ist derzeit nur auf Englisch verfügbar. Das Konvertierungstool oben funktioniert in Ihrer Sprache; der lange Erklärtext wurde noch nicht übersetzt.

Häufig gestellte Fragen

Quick answers.

›Which filters can I generate here?

You can adjust `blur`, `brightness`, `contrast`, `grayscale`, `hue-rotate`, `invert`, `opacity`, `saturate`, and `sepia` settings.

›Are CSS filters performant?

Most filters are hardware-accelerated by the browser. However, large `blur` values or applying many filters to large images can impact scroll performance on lower-end devices.

›What browser support should I expect?

Modern browsers have excellent support for CSS filters. For older environments like Internet Explorer, these effects will gracefully degrade and simply not show.

›Can I apply multiple filters at once?

Yes. The tool combines all active values into a single `filter` property string, which is the standard way to chain multiple effects in CSS.

Andere suchten auch nach

Verwandte Tools

More in this room.

Alle anzeigen in Farbe & Design