Question 1

What is the CSS filter property?

Accepted Answer

The CSS filter property applies graphical effects such as blur, color shifts and brightness changes to an element and everything it contains. You list one or more filter functions — for example filter: blur(2px) brightness(1.2) contrast(1.1); — and the browser renders the element through those effects. It works on images, backgrounds, text and any other element.

Question 2

Can I combine several filters at once?

Accepted Answer

Yes. The filter property accepts a space-separated list of functions and applies them in order, left to right. For instance filter: grayscale(1) contrast(1.2) blur(1px) first removes color, then boosts contrast, then blurs the result. Order matters, because each function operates on the output of the previous one.

Question 3

What does hue-rotate do?

Accepted Answer

hue-rotate(deg) spins every color around the color wheel by the given angle while keeping brightness and saturation. hue-rotate(0deg) leaves colors unchanged, hue-rotate(180deg) shifts them to roughly the opposite hue, and hue-rotate(360deg) returns to the original. It is a quick way to recolor an image or create themed variants.

Question 4

How is filter different from backdrop-filter?

Accepted Answer

filter applies effects to the element itself and its contents. backdrop-filter applies the same kinds of functions to whatever is behind the element, which is how frosted-glass panels are made. Use filter to blur or recolor an image; use backdrop-filter with a semi-transparent background to blur the page beneath a card or header.

Question 5

How do I make an image black and white with CSS?

Accepted Answer

Apply filter: grayscale(1); (or grayscale(100%)) to remove all color. For a richer monochrome look, combine it with contrast and brightness, for example filter: grayscale(1) contrast(1.1) brightness(1.05);. You can transition the grayscale value on hover to fade between color and black and white.

CSS FilterGenerator

CSS Filter
Generator