What CSS filters are available?

The CSS filter property supports: blur (Gaussian blur in px), brightness (0%=black, 100%=normal, 200%=double), contrast (0%=grey, 100%=normal), grayscale (0%=color, 100%=black and white), hue-rotate (shifts colors 0-360deg around the color wheel), invert (0%=normal, 100%=negative), opacity, saturate (color intensity), and sepia (warm brownish tint). Multiple filters combine in one rule.

Does CSS filter work on all browsers?

Yes — CSS filter has been supported in all modern browsers since around 2016 (Chrome 18+, Firefox 35+, Safari 9.1+, Edge 12+). Internet Explorer never supported it. The filter property also works on any HTML element, not just images — you can apply it to divs, text, buttons, or entire sections.

What is the difference between filter and backdrop-filter?

filter applies effects to the element itself and everything inside it. backdrop-filter applies effects to whatever is behind the element, creating frosted-glass effects. A modal with backdrop-filter: blur(10px) blurs the content behind it, while filter: blur(10px) would blur the modal itself.

Can I animate CSS filters?

Yes, CSS filters are fully animatable via transitions and animations. For example: transition: filter 0.3s ease — hover effects with brightness or blur are a popular technique. You can also use @keyframes to animate hue-rotate for a rainbow color cycling effect. Performance is good since filters are GPU-accelerated in most browsers.

Why does my filter look different on mobile vs desktop?

Color rendering varies between display types (AMOLED, IPS, LCD) and operating systems. Test on actual devices if color accuracy is critical. Safari on iOS renders some filters slightly differently than Chrome — always test on both when filters affect important visual design.

CSS-Filter-Generator

Erstellen Sie CSS-Filtereffekte mit Live-Vorschau. Passen Sie Weichzeichner, Helligkeit, Kontrast, Graustufen, Farbton-Rotation, Sättigung, Sepia und mehr an und kopieren Sie das fertige CSS.

Voreinstellungen

Weichzeichner0px

Helligkeit100%

Kontrast100%

Graustufen0%

Farbton-Rotation0deg

Invertieren0%

Deckkraft100%

Sättigung100%

Sepia0%

Vorschau-Bild-URL (optional)

CSS-Ausgabe

filter: none;

CSS-filter-Eigenschaft

Die CSS-filter-Eigenschaft wendet grafische Effekte wie Weichzeichner oder Farbverschiebung auf Elemente an. Mehrere Filter können kombiniert werden und werden von links nach rechts angewendet.

Anleitung

Erstellen Sie CSS-Filtereffekte mit Live-Vorschau. Passen Sie Weichzeichner, Helligkeit, Kontrast, Graustufen, Farbton-Rotation, Sättigung, Sepia und mehr an und kopieren Sie das fertige CSS.

1Start with a preset to see what's possible: Grayscale turns the image black and white, Vintage adds warmth and reduces contrast, Dramatic boosts contrast for a punchy look. Presets are a quick starting point — every slider is still adjustable afterward.
2Fine-tune individual filters with the sliders. Brightness and contrast together control overall exposure. Saturate adds or reduces color intensity — useful for making a dull photo pop without changing any other property. Hue-rotate shifts all colors around the wheel by a given number of degrees.
3Paste a URL to any image you want to preview in the image URL field. The default demo image is a landscape photo — swap it with your own image URL to see how the filters actually look on the content you're styling.
4When you're happy with the result, click Copy to get the CSS line. Paste it directly into your stylesheet. Apply it to an img element, a div with a background-image, or any other element. The filter applies to the element and all its children.

Funktionen

Live preview — see filter changes in real time without refreshing or re-applying
9 filter controls — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia
Quick presets — 9 one-click starting points including Grayscale, Vintage, Dramatic, Cool, and Warm
Custom image URL — preview filters on your own images, not just the demo photo

Häufig gestellte Fragen

Mehr erfahren

CSS Filter Generator — Create Visual Effects with Pure CSS