filter()
The filter() CSS function applies one or more graphic effects to a CSS image, such as a background image. You can use functions, such as blur() and drop-shadow(), alone or combined to produce different effects. For instance, background: filter(url(image.png), blur(2px)). It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.types.image.filter | | | | 9.1 | | 9.3 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Removed
- This feature was removed in a later browser version (9.1)
Compatibility
- Available with a vendor prefix: -webkit- (9)
Notes 2 item(s)
Removed
- This feature was removed in a later browser version (9.3)
Compatibility
- Available with a vendor prefix: -webkit- (9)
Syntax
CSS
.element {
background: filter(
url(image.png),
blur(2px) brightness(1.2)
);
}Live demo
Use cases
-
Use filter()
Use filter() when the default CSS behavior is not expressive enough for the component or layout you are building.
-
Handle edge cases
Apply filter() to solve a specific styling constraint without introducing broader layout or behavior changes.
Cautions
- Test filter() in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
- Plan a fallback or acceptable degradation path when support is still limited.
Accessibility
- Confirm that using filter() does not make content harder to perceive, understand, or operate in assistive contexts.