W3docs
en
Log in

CSS filter Property

The filter CSS property sets filters to the image. Learn about values and see the effects illustrated in the examples.

The filter property is used to apply 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 Valuenone
Applies toAll elements.
InheritedNo.
AnimatableYes.
VersionCSS3
DOM Syntaxobject.style.filter = "hue-rotate(360deg)";

Syntax

Syntax of CSS filter Property

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

Example of the filter property:

Example of CSS filter Property with blur value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        filter: blur(3px);
        max-width: 100%;
      }
    </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>
Try it Yourself »

Result

CSS filter Property

Example of using the filter property to make the image brighter:

Example of CSS filter Property with brightness value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        filter: brightness(150%);
        max-width: 100%;
      }
    </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>
Try it Yourself »

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

Example of the filter property with the "grayscale" value:

Example of CSS filter Property with grayscale value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        filter: grayscale(80%);
        max-width: 100%;
      }
    </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>
Try it Yourself »

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

Example of the filter property with the "saturate" value:

Example of CSS filter Property with saturate value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        filter: saturate(300%);
        max-width: 100%;
      }
    </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>
Try it Yourself »

Example of the filter property with the "sepia" value:

Example of the filter property with the sepia value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        filter: sepia(70%);
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Filter example</h2>
    <p>For this image the filter is set to "sepia(70%)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
    </p>
  </body>
</html>
Try it Yourself »

Example of the filter property with the "contrast" value:

Example of the CSS filter Property with contrast value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        filter: contrast(40%);
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Filter example</h2>
    <p>For this image the filter is set to "contrast(40%)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
    </p>
  </body>
</html>
Try it Yourself »

Example of the filter property with the "opacity" value:

Example of the CSS filter property with the "opacity" value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        filter: opacity(0.4);
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Filter example</h2>
    <p>For this image the filter is set to "opacity(0.4)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
    </p>
  </body>
</html>
Try it Yourself »

Example of the filter property with the "invert" value:

Example of the CSS filter property with the "invert" value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        filter: invert(0.7);
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Filter example</h2>
    <p>For this image the filter is set to "invert(0.7)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
    </p>
  </body>
</html>
Try it Yourself »

Example of the filter property with the "hue-rotate" value:

Example of the CSS filter property with the "hue-rotate" value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        filter: hue-rotate(90deg);
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Filter example</h2>
    <p>For this image the filter is set to "hue-rotate(90deg)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
    </p>
  </body>
</html>
Try it Yourself »

Values

ValueDescriptionPlay it
noneApplies no effect. This is the default value of this property.Play it »
blurApplies blur on an image. It is specified by a length value. The larger the value the more blur will be applied. If no value is applied, 0 is used.Play it »
brightnessMakes 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% make the image brighter.Play it »
contrastAdjusts 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% apply more contrast to the image.Play it »
drop-shadowApplies a drop shadow effect on the image.Play it »
grayscaleChanges the image to grayscale. 0% is the value of original image. 100% makes the image grey. Negative values are not allowed.Play it »
hue-rotateApplies a hue rotation effect on the image. It is specified by degrees. Maximum value is 360 degrees.Play it »
invertInverts the samples in the image. 0 is the default value. 100% makes the image fully inverted.Play it »
opacitySets the opacity level for the image. It describes the transparency of the image. If the value is 0 the image is completely transparent. 100% is the current state of the image.Play it »
saturateApplies saturate effect on the image. 0% makes the image completely unsaturated. 100% is default value of the image. Values over 100% make the image super-saturated.Play it »
sepiaConverts the image to sepia. Default value is 0%, 100% makes the image completely sepia.Play it »
urlThe url() function takes the location of an SVG file that specifies a filter, and may include an anchor to a specific filter element.
initialMakes the property use its default value.
inheritInherits the property from its parents element.

Practice

Practice

What are the different types of effects that can be achieved using the CSS filter property?