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


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


We use cookies to improve your experience. Learn more in our Privacy policy.