Image Filters

By the end of this lesson, you will be able to apply CSS filter functions such as grayscale(), blur(), and brightness() to images and other elements to create visual effects without editing the original file.

What it is

CSS filters are visual effects applied to an element after it is rendered. The filter property accepts one or more filter functions, such as grayscale(), blur(), brightness(), contrast(), saturate(), and sepia(). When used on an img, the effect changes how the image appears in the browser, but it does not change the original image file.

Think of a filter as a small image-processing step. grayscale(100%) removes color, blur(2px) softens edges, and brightness(1.1) makes the image slightly lighter. Multiple functions can be chained, and they are applied from left to right.

Why it matters

• It lets you create hover effects, disabled states, or dark-mode adjustments with CSS only.
• It avoids storing multiple versions of the same image, such as color and grayscale copies.
• It can reduce network requests compared with loading a separate filtered image.
• It works on many elements, not only images, including buttons, cards, and text.
• It can be animated or changed with JavaScript for interactive UI effects.

Syntax or steps

The smallest useful pattern is one filter function on an element:

img {
  filter: grayscale(100%);
}

To combine effects, list functions separated by spaces:

img {
  filter: blur(2px) brightness(1.1);
}

Common values:

• grayscale(0%) to grayscale(100%): amount of gray.
• blur(0px) to larger lengths: blur radius.
• brightness(0) to brightness(1) and above: darker, normal, or lighter.

Example

<img src="photo.jpg" alt="A landscape photo" class="filtered">

<style>
.filtered {
  filter: grayscale(80%) brightness(1.15) blur(1px);
  transition: filter 0.3s ease;
}

.filtered:hover {
  filter: grayscale(0%) brightness(1) blur(0px);
}
</style>

Part by part:

• The HTML loads an image and gives it a class.
• The CSS applies three filters: mostly gray, slightly brighter, and lightly blurred.
• The transition makes the change smooth when the user hovers.
• The :hover rule removes the effects, showing the original image.

Common mistakes

• Applying filter to a parent when you only wanted to affect one child. The filter applies to the whole element and its descendants.
• Using too much blur or brightness, which can make text unreadable or images look unnatural.
• Forgetting that blur() can make edges look soft and may reveal background colors or gaps around the element.
• Trying to animate filter on very large images without testing performance. Keep effects simple and test on mobile devices.

When to use it

Use filter when you need visual effects like grayscale, blur, or brightness. Use opacity when you only need transparency. Use a pre-edited image when the effect must be identical across all browsers or when you need pixel-perfect control.

Practice

Guided exercise: Add a class to an image and make it grayscale by default. On hover, remove the grayscale.

<img src="photo.jpg" alt="Sample image" class="gray">

<style>
.gray {
  filter: grayscale(100%);
}

.gray:hover {
  filter: grayscale(0%);
}
</style>

Expected output: the image appears gray until the pointer is over it, then it becomes colored.

Challenge: Apply a light blur and increased brightness to a card image, then remove both effects on hover.

Solution hint: use filter: blur(1px) brightness(1.1); and set filter: none; on hover.

Quick check

Question: What does filter: brightness(0.8) do?

Answer: It makes the element slightly darker than normal, because values below 1 reduce brightness.

Summary

CSS filters let you apply visual effects such as grayscale, blur, and brightness directly in the browser. They are useful for interactive states and simple image adjustments without editing the original file.

Use them carefully, combine functions in order, and remember that filters affect the whole element and its children.