CSS filter Property

What You’ll Learn

The filter property lets you apply visual effects like blur, grayscale, brightness, and contrast to any element — most often images — without editing the original file.

Introduction

The filter property in CSS provides a way to apply graphical effects like blur, grayscale, brightness, and contrast to elements. This property is useful for adding visual effects without needing to modify the original image or content. It can be applied to any HTML element but is most commonly used with images and other graphical elements.

Definition and Usage

Apply filter directly on the element you want to transform. The effect is rendered on the element and everything inside it as a single visual layer. Use it for hover states, disabled thumbnails, photo treatments, and decorative UI accents.

📝 Syntax

The syntax for the filter property is as follows:

element {
  filter: filter-function(value);
}

You can apply multiple filters by separating them with spaces:

element {
  filter: filter-function1(value1) filter-function2(value2);
}

Basic Example

img {
  filter: blur(5px);
}

Default Value

The default value for the filter property is none, which means no filter effects are applied.

Syntax Rules

• Chain multiple functions in one filter declaration, separated by spaces.
• Order matters — filters are applied left to right.
• The property is not inherited; set it on each element you want to affect.
• Use the separate opacity property instead of filter: opacity() for transparency.
• drop-shadow() follows the visible shape of the element, unlike box-shadow.

💎 Property Values

The filter property accepts filter functions and the keyword none:

filter vs backdrop-filter

Examples Gallery

In this example, we’ll apply a blur effect to an image — plus grayscale, brightness and contrast, chained filters, and drop-shadow.

<style>
  img {
    filter: blur(5px);
  }
</style>

<h1>Image with Blur Effect</h1>
<img src="photo.jpg" alt="Blurred image">

.photo {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.photo:hover {
  filter: grayscale(0%);
}

.hero-photo {
  filter: brightness(110%) contrast(120%);
}

.logo {
  filter: drop-shadow(0 6px 12px rgba(15, 23, 42, 0.35));
}

♿ Accessibility

• Do not rely on color alone — grayscale or invert filters can remove color cues; keep text labels clear.
• Check contrast after filtering — brightness and contrast changes can make text harder to read.
• Avoid heavy blur on important content — blurred text or controls may be unreadable for some users.
• Respect reduced motion — consider disabling animated filter transitions with prefers-reduced-motion.
• Provide alt text on images — filters change appearance but not the meaning conveyed by alt text.

💡 Best Practices