filter
Applies graphical effects like blur, brightness, or color shifts to an element, similar to image editing software effects.
Quick example
.blur-background {
filter: blur(8px);
/* blurs the element content */
}
.grayscale-image {
filter: grayscale(100%);
/* turns the element completely black and white */
}Quick facts
Initial value
noneInherited
No
Applies to
all elements and SVG container elements
Animation type
filterList
Values
none filter Browser Support
Widely available Since 2016 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2016.
Safe to use without fallbacks.
53+
35+
9.1+
12+