What is the CSS filter property?

The CSS filter property applies graphical effects like blur, brightness, contrast, grayscale, and more to an element. Filters are commonly used on images but work on any HTML element. Multiple filter functions can be chained together in a single declaration.

Can I combine multiple CSS filters on one element?

Yes, you can chain multiple filter functions in a single filter property by separating them with spaces. For example: filter: blur(2px) brightness(1.2) contrast(1.1). The filters are applied in the order they appear, and the order can affect the final result.

What is the difference between CSS filter and backdrop-filter?

The filter property applies effects to the element itself and its contents, while backdrop-filter applies effects to the area behind the element. Backdrop-filter is commonly used to create frosted glass effects on overlays and navigation bars.

CSS Filter Generator

Build CSS filter effects visually with sliders. Adjust blur, brightness, contrast, grayscale, hue-rotate, saturate, sepia, and drop-shadow — see changes live and copy the CSS.

Live Preview

Generated CSS

Filter Presets

How to Use CSS Filters

The CSS filter property applies graphical effects like blur, color shifts, and shadows to elements. Filters are GPU-accelerated in modern browsers, making them performant for animations and hover effects. They work on images, backgrounds, text, and any HTML element.

Available Filter Functions

blur() — Applies a Gaussian blur measured in pixels
brightness() — Adjusts brightness; 1 is normal, 0 is black, above 1 brightens
contrast() — Adjusts contrast; 1 is normal, 0 is gray
grayscale() — Converts to grayscale; 0 is unchanged, 1 is fully gray
hue-rotate() — Rotates hue by degrees around the color wheel
invert() — Inverts colors; 0 is normal, 1 is fully inverted
opacity() — Adjusts transparency; 1 is fully opaque, 0 is invisible
saturate() — Adjusts saturation; 1 is normal, 0 is desaturated
sepia() — Applies a sepia tone; 0 is unchanged, 1 is full sepia
drop-shadow() — Adds a shadow that follows the element's alpha channel

Filter Order Matters

Filters are applied in the order they appear. For example, applying grayscale(1) before hue-rotate(90deg) will first desaturate and then rotate the hue of the already-gray image. Reversing the order produces a different result. Experiment with the sliders above to see how order and combination affect the output.

Browser Support

CSS filters are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. The filter property does not need vendor prefixes in current browser versions. For older Safari versions, a -webkit-filter prefix may be needed.

CSS Filter Generator

Filter Presets

How to Use CSS Filters

Available Filter Functions

Filter Order Matters

Browser Support

Related Tools

CSS Gradient Generator

Box Shadow Generator

Color Picker

Frequently Asked Questions