Filter Property
Last updated: 2026-09-13
filter Filter Property
The filter property applies graphic effects to an element — such as blur, brightness, contrast, and grayscale — like Photoshop filters. It acts on the element's rendered output and affects both the element and all of its children, making it a common tool for image processing and visual effects.
| Category | |
|---|---|
| Initial Value | none |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
filter: none | <filter-function>+;
/* <filter-function> = blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() */⚙️ Values
| Value | Type | Description |
|---|---|---|
none | Keyword | No filter |
<filter-function> | Type | blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia, or url() |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| filter | ✓ v53 | ✓ v12 | ✓ v35 | ✓ v9.1 | ✓ v40 |
| Supported in all major browsers | |||||
Tip： Multiple filter functions can be used at once, separated by spaces, and are applied in order.
Warning： filter affects the element and all of its children; if you only want to blur the background without affecting foreground content, use backdrop-filter.
❓ FAQ
QBoth filter and opacity can adjust transparency — what is the difference?
Aopacity only adjusts the element's overall transparency and creates a stacking context. filter: opacity(50%) is one link in a filter chain and can be combined with other filters such as blur or saturate. Both trigger GPU compositing, but opacity has a dedicated optimization path — prefer plain opacity for simple transparency changes, and use filter for composite effects.
QDoes the CSS filter property affect rendering performance and FPS?
AYes. Expensive filters like blur() and drop-shadow() trigger heavy per-pixel computation and can drop frames on many elements or low-end devices; brightness, contrast, and saturation are comparatively cheap. Recommendations: apply filters only statically or on hover, avoid blurring several large elements at once, use pre-rendered images instead of live filters when critical, and test on the target devices.
QWhat is the difference between filter and backdrop-filter in CSS?
Afilter applies to the element itself and all of its content — for example, blurring a whole image. backdrop-filter applies to the content behind the element, producing a frosted-glass effect commonly used for navigation bars and modal backgrounds while the foreground text stays crisp. backdrop-filter has slightly weaker browser support and a heavier performance cost, and the two are often combined for refined interface layering.
QHow do I turn an image grayscale and restore color on hover?
AUse grayscale(): set filter: grayscale(100%) by default and switch to grayscale(0) or none on hover, then add transition: filter 0.3s for a smooth color change. This very common grayscale-to-color interaction is used for memorial pages, disabled avatars, and image-wall hover effects, and it costs almost nothing to implement.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
