CSS Filters: A Practical Guide, Examples, and Tricks to Master filter() and backdrop-filter

When I started working with CSS filters, the first thing that surprised me was how similar applying "Photoshop or GIMP style" effects was with just a single line of code. From then on, it became addictive: I started trying it with images, text, videos, and even <canvas> elements. In this guide, I'll tell you the essentials (and what's not so obvious), with ready-to-use examples.

What are CSS Filters and what are they used for?

CSS filters are functions that alter the visual appearance of an element: blur, brightness, contrast, sepia, saturation, drop shadow, etc. Although we usually apply them to images, they technically work on any DOM element.
When I started using them, I discovered effects I hadn't even planned for: a blur over video, or a contrast applied to text achieved unexpected (but useful) results.

How they work and which elements can be filtered

You can apply them to:

• images (<img>)
• backgrounds (background-image)
• text
• videos
• entire containers
• <canvas> (very useful when generating dynamic graphics)

“Photoshop/GIMP” type effects with a single line of CSS

Like everything in CSS, it's simple; just the typical way to apply filters, their direct syntax:

filter: sepia(100%);

Many filters accept 0–1 or 0%–100%.

Example: contrast(0.5) = contrast(50%).

Application Order and Function Combination

This is key. If you apply:

filter: grayscale(100%) brightness(40%);

The first thing it does is convert the image to black and white, and then it adjusts the brightness.
When I was testing combinations for an article, I remember swapping two functions, and the result changed entirely.

The filter property: syntax, values, and key rules

The filter property accepts one or more functions, applied in the order you write them.

I used to use the prefixes -webkit-filter and -moz-filter to maintain compatibility, especially in old projects. Nowadays, they are rarely necessary, but if you work with legacy browsers, they still work:

img { -webkit-filter: grayscale(100%); filter: grayscale(100%);}

-webkit and -moz prefixes: when to use them today

• Relevant only for projects that must support older browsers.
• Don't affect modern Chrome/Firefox.
• I used them out of habit for years.

All CSS Filters Explained with Examples

CSS filters can be applied to any DOM element such as text, images, video, and even the canvas.

We will use the filter prefixes (webkit and moz) to maintain cross-browser compatibility; finally, this is the image we will use throughout this article without any filters applied:

Grayscale: grayscale()

Converts the element to grayscale. The filter is defined in percentages, in ranges from 0% to 100%, which correspond to a color element to a completely black/white element, respectively.

img {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
   filter: grayscale(100%);
}

I used it constantly in my initial tests because I had a base image without a filter to compare results.

hue-rotate: hue rotation

Defines the color rotation measured in degrees; that is, it allows us to vary the hue of the element along a color angle. The filter accepts values between 0 and 359, working like a wheel; in other words, if we set the value "360deg", we will get the value "0deg".

img {
  -webkit-filter: hue-rotate(150deg);
  -moz-filter: hue-rotate(150deg);
  filter: hue-rotate(150deg);
}

Great for artistic effects.

sepia(): sepia tone

Applies a sepia tone to the element. Again, it is measured in percentages in a range from 0% (element with its original color) to 100%.

img {
  -webkit-filter: sepia(100%);
  -moz-filter: sepia(100%);
  filter: sepia(100%);
}

Contrast

Adjusts the contrast of our element. It is also defined in percentages and accepts negative values.

img {
  -webkit-filter: contrast(250%);
  -moz-filter: contrast(250%);
  filter: contrast(250%);
}

Saturation

Adjusts the saturation of our element. 0% returns a completely black DOM element, and 100% returns the element with its original color.

img {
  -webkit-filter: saturate(40%);
  -moz-filter: saturate(40%);
  filter: saturate(40%);
}

Blur: Gaussian blur

Applies Gaussian blur to our element, measured in pixels starting from 0.

img {
 -webkit-filter: blur(6px);
 -moz-filter: blur(6px);
  filter: blur(6px);
}

Perfect for glassmorphism-style backgrounds or for blurring elements behind a modal.

invert(): color inversion

Inverts the colors of the element; like most filters, it is measured in percentages, from 0% to 100%, where 0% corresponds to the element with its original colors and 100% to the element with its colors completely inverted.

img {
 -webkit-filter: invert(100%);
 -moz-filter: invert(100%);
 filter: invert(100%);
}

Brightness: brightness()

Lightens or darkens the element; like most filters, it is measured in percentages, from 0% to 100%.

img {
 -webkit-filter: brightness(40%);
 -moz-filter: brightness(40%);
  filter: brightness(40%);
}

I use it often to highlight dark images without editing the original file.

opacity(): opacity

To define the opacity:

filter: opacity(0.5);

drop-shadow(): advanced drop shadow

filter: drop-shadow(8px 8px 10px red);

url(): SVG filters

filter: url(#my-filter);

Less common but extremely powerful for custom effects.

How to combine multiple CSS filters to create advanced effects

We can use more than one filter per element by separating each one with a space and create very interesting visual effects.

img {
 -webkit-filter: grayscale(69%) brightness(18%) contrast(110%);
 -moz-filter: grayscale(69%) brightness(18%) contrast(110%);
  filter: grayscale(69%) brightness(18%) contrast(110%);
}

Best practices

• Don't overuse blur + drop-shadow together (it can be costly in performance).
• Adjust values gradually: going from 0 to 100% usually creates abrupt visual jumps.
• Don't assume the order doesn't matter: it does matter.

Creative examples

Vintage effect:

filter: sepia(80%) brightness(90%) saturate(120%);

Neon effect for text:

filter: brightness(140%) saturate(200%);

The backdrop-filter property: filters only for the background

When I discovered backdrop-filter, I literally thought: finally, I can blur the background without affecting the text!

backdrop-filter: blur(10px);

Differences between filter and backdrop-filter

• filter → affects the entire element
• backdrop-filter → affects only what is behind it

Classic Use Cases

• glassmorphism-style cards
• floating menus over images
• translucent overlays

Compatibility

It works well in modern browsers but requires a fallback for some environments.

Browser compatibility and performance notes

Filters are very well supported today, except for backdrop-filter in older versions of Firefox and Edge Legacy.

In real projects, I always tested heavy filters on mobile because a large blur can consume resources.

Complete examples ready to copy

Filters applied to images

img.vintage {
 filter: sepia(70%) contrast(120%) brightness(90%);
}

Filters applied to text

h2.glow {
 filter: brightness(150%) saturate(200%);
}

Animating filters

img:hover {
 transition: filter 0.5s;
 filter: grayscale(0);
}

I used this exact technique when I wanted to change an image from grayscale to color on mouse hover.

Examples with CSS filters

These are just a few of the examples we have on the blog using CSS filters; here are the other posts where we explore other experiments with filters:

• The Blur filter in CSS and some of its possible uses
• The invert filter in CSS and some of its possible uses

Frequently Asked Questions about CSS Filters

• Can filters be animated?
  • Yes, with transition and @keyframes.
• Do they affect performance?
  • High blur and drop-shadow values can consume GPU.
• Can I use multiple filters at once?
  • Yes, separated by spaces.
• How do I use filters on transparent images?
  • drop-shadow() is your friend: it respects real outlines.

Conclusion

CSS filters are a creative, powerful, and easy-to-use tool. I have worked with them on all kinds of elements —from images to videos and text— and they remain one of the most underestimated functions of the language. With a single line, you can completely transform the visual style of any project.