CSS filter Property

CSS filter Property

The filter property in CSS applies graphical effects like blur, brightness, contrast, and grayscale to elements. It is commonly used for images, backgrounds, and even text.

1. Syntax

selector {
  filter: none | <filter-function> | multiple filters;
}

Value	Description
none (default)	No filter applied.
blur(px)	Blurs the element by a specified amount.
brightness(%)	Adjusts brightness (100% is default).
contrast(%)	Adjusts contrast (100% is default).
grayscale(%)	Converts the element to grayscale (100% is full grayscale).
invert(%)	Inverts colors (100% is full inversion).
opacity(%)	Controls transparency (0% is fully transparent, 100% is fully visible).
saturate(%)	Adjusts color intensity (100% is default).
sepia(%)	Adds a sepia tone (100% is full sepia).
drop-shadow(x y blur color)	Adds a shadow effect.
hue-rotate(deg)	Rotates colors on the hue wheel (0-360deg).

2. Basic Example – Blur Effect

.image {
  filter: blur(5px);
}

✅ The image appears blurred.

3. Example – Multiple Filters

You can combine multiple filters:

.image {
  filter: brightness(120%) contrast(90%) grayscale(50%);
}

✅ The image is brighter, has lower contrast, and is 50% grayscale.

4. Example – Hover Effects

.image {
  transition: filter 0.3s ease;
}

.image:hover {
  filter: grayscale(100%) blur(3px);
}

✅ On hover, the image turns grayscale and slightly blurred.

5. Example – Applying Filters to Text

.text {
  filter: drop-shadow(2px 2px 5px gray);
}

✅ The text gets a shadow effect.

6. Example – Inverting Colors for Dark Mode

.dark-mode {
  filter: invert(100%);
}

✅ Turns everything into a dark mode-like effect.

7. Browser Compatibility

Most filters are supported in modern browsers (Chrome, Firefox, Edge, Safari).

8. Best Practices

✔ Use filter: blur(10px); for background effects.
✔ Use filter: drop-shadow(); instead of box-shadow for SVGs and images.
✔ Use filter: grayscale(100%); for black & white effects.