We use cookies to improve your experience. Learn more in our Privacy policy.
filter
This property gives an element graphical effects like blur or color shift. Filters are commonly used to change the way images, backgrounds, and borders are rendered.
In SVG, it gets applied to container elements excluding the defs element and all graphics elements.
| Initial value | none |
| Applies to | all elements in the page |
Syntax
filter: blur(10px);
filter: brightness(0.2);
filter: contrast(120%);
filter: drop-shadow(8px 8px 10px black);
filter: grayscale(20%);
filter: hue-rotate(30deg);
filter: invert(70%);
filter: opacity(15%);
filter: saturate(50%);
filter: sepia(25%);
Browser support
| filter | 53 | 12 | 35 | 40 | 9.1 | |
| svg | 35 |