CSS filter Property

The filter property applies visual effects to an element (image). The filter property has the following values:

  • none
  • blur
  • brightness
  • contrast
  • drop-shadow
  • grayscale
  • hue-rotate
  • invert
  • opacity
  • saturate
  • sepia
  • url
Initial Value none
Applies to Table-cell elements.
Inherited No.
Animatable Yes.
Version CSS3
DOM Syntax object.style.WebkitFilter = "hue-rotate(360deg)";

Syntax

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
      -webkit-filter: blur(3px); /* Safari 6.0 - 9.0 */
      filter: blur(3px);
      }
    </style>
  </head>
  <body>
    <h2>Filter property example</h2>
    <p>For this image the filter is set to "blur(3px)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image">
    </p>
  </body>
</html>

Let’s make the image brighter in the following example:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
      -webkit-filter: brightness(120%);/* Safari 6.0 - 9.0 */
      filter: brightness(150%);
      }
    </style>
  </head>
  <body>
    <h2>Filter property example</h2>
    <p>For this image the filter is set to "brightness(150%)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image"> 
    </p>
  </body>
</html>

In the following examples "greyscale" value makes the image gray:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
      -webkit-filter: grayscale(80%);/* Safari 6.0 - 9.0 */
      filter: grayscale(80%);
      }
    </style>
  </head>
  <body>
    <h2>Filter example</h2>
    <p>For this image the filter is set to "grayscale(80%)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image">
    </p>
  </body>
</html>

Here, "saturate" filter is applied on the image where the given value is 300%.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
      -webkit-filter: saturate(300%);/* Safari 6.0 - 9.0 */
      filter: saturate(300%);
      }
    </style>
  </head>
  <body>
    <h2>Filter example</h2>
    <p>For this image the filter is set to "saturate(300%)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image">
    </p>
  </body>
</html>

Values

Value Description
none Applies no effect. This is the default value of this property.
blur Applies blur on an image. It is specified by px. The larger the value the more blur will be applied. If no value is applied, 0 is used.
brightness Makes the image brighter. If the value is 0 the image will be black. 100% is the default value and shows the original image. Values over 100% the image will become brighter.
contrast Adjusts contrast of an image. If the value is 0 the image will be black. 100% is the default value and shows the original image. Values over 100% more contrast will be applied to the image.
drop-shadow Applies a drop shadow effect on the image.
grayscale Changes the image to grayscale. 0% is the value of original image. 100% makes the image grey. Negative values are not allowed.
hue-rotate Applies a hue rotation effect on the image. It is specified by degrees. Maximum value is 360 degree.
invert Inverts the samples in the image. 0% is default value. 100% makes the image fully inverted.
opacity Sets the opacity level for the image. It describes the transparency of the image. If the image has 0% value it is completely transparent. 100% is the current state of the image.
saturate Applies saturate effect on the image. 0% makes the image completely un-saturated. 100% is default value of the image. Values over 100% makes the image super-saturated.
sepia Converts the image to sepia.Default value is 0%, 100% makes the image completely sepia.
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.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.




Related articles