filter
Applies graphical effects like blur, brightness, or color shifts to an element, similar to image editing software effects.
It is documented as part of the Filter Effects specification.
Syntax
/* Usage Example */
.blur-background {
filter: blur(8px);
/* blurs the element content */
}
.grayscale-image{
filter: grayscale(100%);
/* turns the element completely black and white */
}
/* Syntax */
filter: none;
/* Global values */
filter: inherit;
filter: initial;
filter: revert;
filter: revert-layer;
filter: unset;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.
53+
35+
9.1+
12+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more