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

filter531235409.1
svg35

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

×