CSS Property filter








CSS Filters can create visual effects. It is like the Photoshop filters for the browser.

The CSS filter property can have effects like blur or color shifting on an element's rendering.

Filters are commonly used to adjust the rendering of an image, a background, or a border.

Summary

Initial value
none
Inherited
no
CSS Version
CSS3
JavaScript syntax
object.style.filter="grayscale(1)"
Animatable
Yes

CSS Syntax

filter: <filter-function> [<filter-function>]* | none

filter-function can be is one of:

  • blur()
  • brightness()
  • contrast()
  • url()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • sepia()
  • custom() - "coming soon"

The following code shows how to use blur function.

.blur-me {
  filter: blur(20px);
}




Browser compatibility

filter 31.0 (-webkit-) No No 7.0 (-webkit-) 18+ (-webkit-)

grayscale()

grayscale() converts the image to grayscale.

grayscale() has the following syntax.

grayscale([ number | percentage ])
  • The value defines the proportion of the conversion.
  • A value of 100% is completely grayscale.
  • A value of 0% leaves the input unchanged.
  • Values between 0% and 100% are linear multipliers on the effect.
  • If the 'amount' parameter is missing, a value of 100% is used.
  • Negative values are not allowed.
<!DOCTYPE html>
<html>
<style>
<!--from w  ww .ja va2s .  c o m-->
img { display: block;  }

img.myFilter {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}
</style>
</head>
<body>
<img src="http://www.java2s.com/style/demo/border.png">
<br/>
<img class='myFilter' src="http://www.java2s.com/style/demo/border.png">
</body>
</html>

Click to view the demo





sepia()

sepia() converts the input image to sepia.

sepia() has the following syntax.

sepia([ number | percentage ])
  • The value of 'amount' defines the proportion of the conversion.
  • A value of 100% is completely sepia.
  • A value of 0 leaves the input unchanged.
  • Values between 0% and 100% are linear multipliers on the effect.
  • If the 'amount' parameter is missing, a value of 100% is used.
  • Negative values are not allowed.
<!DOCTYPE html>
<html>
<style>
<!--from   w w w  .  j a  v a2 s  .  c o m-->
img { display: block;  }

img.myFilter {
  -webkit-filter: sepia(1);
  filter: sepia(1);
}
</style>
</head>
<body>
<img src="http://www.java2s.com/style/demo/border.png">
<br/>
<img class='myFilter' src="http://www.java2s.com/style/demo/border.png">

</body></html>

Click to view the demo

saturate()

saturate() saturates the input image.

saturate() has the following syntax.

saturate([ number | percentage ])
  • The value of 'amount' defines the proportion of the conversion.
  • A value of 0% is completely un-saturated.
  • A value of 100% leaves the input unchanged.
  • Other values are linear multipliers on the effect.
  • Values of amount over 100% are allowed, providing super-saturated results.
  • If the 'amount' parameter is missing, a value of 100% is used.
  • Negative values are not allowed.
<!DOCTYPE html>
<html>
<style>
<!--  ww w .j a  va 2 s.c om-->
img { display: block;  }

img.myFilter {
  -webkit-filter: saturate(1.5);
  filter: saturate(1.5);
}
</style>
</head>
<body>
<img src="http://www.java2s.com/style/demo/border.png">
<br/>
<img class='myFilter' src="http://www.java2s.com/style/demo/border.png">

</body></html>

Click to view the demo

hue-rotate()

hue-rotate() applies a hue rotation on the input image.

hue-rotate() has the following syntax.

hue-rotate(angle)
  • The value of 'angle' defines the number of degrees around the color circle the input samples will be adjusted.
  • A value of 0deg leaves the input unchanged.
  • If the 'angle' parameter is missing, a value of 0deg is used.
  • Maximum value is 360deg.
<!DOCTYPE html>
<html>
<style>
<!-- w  w w. j av  a2  s .  c o m-->
img { display: block;  }

img.myFilter {
  -webkit-filter: hue-rotate(50deg);
  filter: hue-rotate(50deg);
}
</style>
</head>
<body>
<img src="http://www.java2s.com/style/demo/border.png">
<br/>
<img class='myFilter' src="http://www.java2s.com/style/demo/border.png">

</body></html>

Click to view the demo

invert()

invert() inverts the samples in the input image.

invert() has the following syntax.

invert([ number | percentage ])
  • The value of 'amount' defines the proportion of the conversion.
  • A value of 100% is completely inverted.
  • A value of 0% leaves the input unchanged.
  • Values between 0% and 100% are linear multipliers on the effect.
  • If the 'amount' parameter is missing, a value of 100% is used.
  • Negative values are not allowed.
<!DOCTYPE html>
<html>
<style>
<!-- w w w  .j av  a 2s  .  com-->
img { display: block;  }

img.myFilter {
  -webkit-filter: invert(0.5);
  filter: invert(0.5);
}
</style>
</head>
<body>
<img src="http://www.java2s.com/style/demo/border.png">
<br/>
<img class='myFilter' src="http://www.java2s.com/style/demo/border.png">

</body></html>

Click to view the demo

opacity()

opacity() applies transparency to the samples in the input image.

This function is similar to opacity property. With filters, some browsers provide hardware acceleration for better performance.

opacity() has the following syntax.

opacity([ number | percentage ])
  • The value of 'amount' defines the proportion of the conversion.
  • A value of 0% is completely transparent.
  • A value of 100% leaves the input unchanged.
  • Values between 0% and 100% are linear multipliers on the effect.
  • This is equivalent to multiplying the input image samples by amount.
  • If the 'amount' parameter is missing, a value of 100% is used.
  • Negative values are not allowed.
<!DOCTYPE html>
<html>
<style>
<!-- w  ww .  j  av a  2  s .  c om-->
img { display: block;  }

img.myFilter {
  -webkit-filter: opacity(0.5);
  filter: opacity(0.5);
}
</style>
</head>
<body>
<img src="http://www.java2s.com/style/demo/border.png">
<br/>
<img class='myFilter' src="http://www.java2s.com/style/demo/border.png">

</body></html>

Click to view the demo

brightness()

brightness() makes image appear more or less bright.

brightness() has the following syntax.

brightness([ number | percentage ])
  • A value of 0% will create an image that is completely black.
  • A value of 100% leaves the input unchanged.
  • Other values are linear multipliers on the effect.
  • Values of an amount over 100% are allowed, providing brighter results.
  • If the amount parameter is missing, a value of 100% is used.
<!DOCTYPE html>
<html>
<style>
<!-- w  ww .jav a 2  s.  c  o  m-->
img { display: block;  }

img.myFilter {
  -webkit-filter: brightness(0.5);
  filter: brightness(0.5);
}
</style>
</head>
<body>
<img src="http://www.java2s.com/style/demo/border.png">
<br/>
<img class='myFilter' src="http://www.java2s.com/style/demo/border.png">

</body></html>

Click to view the demo

contrast()

contrast() adjusts the contrast of the input image.

contrast() has the following syntax.

contrast([ number | percentage ])
  • A value of 0% will create an image that is completely black.
  • A value of 100% leaves the input unchanged.
  • Values of amount over 100% are allowed, providing results with less contrast.
  • If there is no 'amount' parameter, a value of 100% is used.
<!DOCTYPE html>
<html>
<style>
<!--   w ww . ja v a2  s  . c o  m-->
img { display: block;  }

img.myFilter {
  -webkit-filter: contrast(0.5);
  filter: contrast(0.5);
}
</style>
</head>
<body>
<img src="http://www.java2s.com/style/demo/border.png">
<br/>
<img class='myFilter' src="http://www.java2s.com/style/demo/border.png">

</body></html>

Click to view the demo

blur()

blur() applies a Gaussian blur to the input image.

blur() has the following syntax.

blur(length)
  • The value of radius defines the standard deviation to the Gaussian function.
  • A larger value will create more blur.
  • If no parameter is provided, then a value 0 is used.
  • The parameter is specified as a CSS length, but does not accept percentage values.
<!DOCTYPE html>
<html>
<style>
<!--from w w  w  .  j a  v a2s  .  c  om-->
img { display: block;  }

img.myFilter {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}
</style>
</head>
<body>
<img src="http://www.java2s.com/style/demo/border.png">
<br/>
<img class='myFilter' src="http://www.java2s.com/style/demo/border.png">

</body>
</html>

Click to view the demo

drop-shadow()

This function is similar to the box-shadow property. With filters, some browsers provide hardware acceleration for better performance.

drop-shadow() applies a drop shadow effect to the input image.

drop-shadow() has the following syntax.

drop-shadow(length{2,3} color)

The function accepts a parameter of type (defined in CSS3 Backgrounds), with the exception that the 'inset' keyword is not allowed. 

<!DOCTYPE html>
<html>
<style>
<!--   w  w w  .jav  a2 s . c om-->
img { display: block;  }

img.myFilter {
  -webkit-filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.9));
  filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.9));
}
</style>
</head>
<body>
<img src="http://www.java2s.com/style/demo/border.png">
<br/>
<img class='myFilter' src="http://www.java2s.com/style/demo/border.png">

</body></html>

Click to view the demo

url()

url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element.

url() has the following syntax.

url(urlValue) 
<!DOCTYPE html>
<html class=''>
<style>
#svg-filter { display: none; }
img { display: block; }
<!--from w  w w . ja v  a 2  s .  c o m-->
img.myFilter {
  -webkit-filter: url(#svg-blur);
}
</style>
</head>
<body>

<img src="http://www.java2s.com/style/demo/border.png">
<br/>
<img class='myFilter' src="http://www.java2s.com/style/demo/border.png">


<!-- SVG Blur Filter -->
<!-- 'stdDeviation' is the blur amount applied -->
<svg id="svg-filter">
  <filter id="svg-blur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="4"></feGaussianBlur>
  </filter>
</svg>
</body></html>

Click to view the demo

filter animation

<!DOCTYPE html>
<html><head>
<style>
img { display: block;
  -webkit-animation: filter-animation 5s infinite;
}<!-- ww  w  .j av a 2 s  .  c o  m-->

@-webkit-keyframes filter-animation {
  0% {
    -webkit-filter: sepia(0) saturate(2);
  }
  
  50% {
    -webkit-filter: sepia(1) saturate(8);
  }
  
  100% {
    -webkit-filter: sepia(0) saturate(2);
  }
}
</style>


</head>
<body>

<img src="http://www.java2s.com/style/demo/border.png">

</body>
</html>

Click to view the demo