CSS-filter Property

Previous
Quiz
Next

CSS filter property applies graphical effects such as blurring, brightness, contrast, and more to elements. It allows us to manipulate how an element is displayed without changing its underlying content or structure.

Syntax

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

Property Values

Value Description
none It specifies no effect. Default value.
blur(px) It applies blur on image. Larger values apply more blur. Default is 0.
brightness(%) It adjusts the brightness of image. 0% results in black image. 100% is default and results in original image.
contrast(%) It adjusts the contrast of image. 0% results in black image. 100% is default and results in original image.
drop-shadow(offset-x, offset-y, blur-radius, color) It applies a drop shadow effect to the element.
  • offset-x: Specifies the horizontal distance of the shadow from the element. Positive values move the shadow to the right, while negative values move it to the left.
  • offset-y: Specifies the vertical distance of the shadow from the element. Positive values move the shadow down, while negative values move it up.
  • blur-radius: Defines the blur radius of the shadow. Larger values create a more blurred shadow, while smaller values produce a sharper shadow.
  • color: Sets the color of the shadow. It can be a named color, hex code, RGB, RGBA, HSL, or HSLA value.
grayscale(%) It converts the image into grayscale iameg. 0% is default and represents original image. 100% is gray image. Negative values are not allowed.
hue-rotate(deg) It applies a hue-rotation. The degree specified adjusts the image through the angle in the color circle. 0deg is default and represents original image. 360 deg is maximum value
invert(%) It inverts the image.0% is default and represents original image. 100% results in complete inversion of image. Negative values are not allowed.
opacity(%) It controls the transparency of an image. 0% represents completely transparent image. 100% is default and represents original image (no transpareny). Negative values are not allowed.
saturate(%) It saturates the image. 0% represents un-saturated image. 100% is default and represents original image. Negative values are not allowed.
sepia(%) It converts the image to sepia. 0% is default and represents original image. 100% results in sepia image. Negative values are not allowed.
url() It takes the location of an XML file that specifies an SVG filter, and could include an anchor to a specific filter element. Example: filter: url(svg-url#element-id).
initial It sets the property to its default value.
inherit It inherits the property from the parent element.

Examples of CSS Filter Property

The following examples explain the filter property with different values.

Filter Property with None Function

To not have any effect in an element, we use the none value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      #filter{
         filter: none;
      }

   </style>
</head>

<body>
   <h2>
      CSS filter property
   </h2>
   <h4>
      filter: none
   </h4>
   <img src="/https/www.tutorialspoint.com/css/images/content.png" alt="image" 
   width="250" height="250" id="filter"/>
</body>

</html>

Filter Property with Blur Function

In order to introduce blur in an element, we use the blur() function. We specify the value of blur in pixels. Greater the value, greater is the blur effect. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      #filter{
         filter: blur(5px);
      }

   </style>
</head>

<body>
   <h2>
      CSS filter property
   </h2>
   <h4>
      filter: blur(5px)
   </h4>
   <img src="/https/www.tutorialspoint.com/css/images/content.png" alt="image" 
   width="250" height="250" id="filter"/>
   <h4>
      Image used: 
   </h4>
   <img src="/https/www.tutorialspoint.com/css/images/content.png" alt="image"
   width="200" height="200"/>

</body>

</html>

Filter Property with Brightness Function

To adjust the brightness of an element, we use the brightness() function. We specify the value in percentage. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         display: grid;
      }

      #filter1 {
         filter: brightness(30%);
      }

      #filter2 {
         filter: brightness(60%);
      }
   </style>
</head>

<body>
   <h2>
      CSS filter property
   </h2>
   <div>
      <h4>
         filter: brightness(30%)
      </h4>
      <img src="/https/www.tutorialspoint.com/css/images/content.png" alt="image" 
      width="250" height="250" id="filter1" />
      <h4>
         filter: brightness(60%)
      </h4>
      <img src="/https/www.tutorialspoint.com/css/images/content.png" alt="image" 
      width="250" height="250" id="filter2" />
   </div>
   <h4>
      Image used: 
   </h4>
   <img src="/https/www.tutorialspoint.com/css/images/content.png" alt="image" 
   width="200" height="200" />

</body>

</html>

Filter Property with Contrast Function

To adjust the darkness of an element, we use the contrast function. We specify the values in percentage. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         display: grid;
      }

      #filter1 {
         filter: contrast(20%);
      }

      #filter2 {
         filter: contrast(55%);
      }
   </style>
</head>

<body>
   <h2>
      CSS filter property
   </h2>
   <div>
      <h4>
         filter: contrast(20%)
      </h4>
      <img src="/https/www.tutorialspoint.com/css/images/content.png" alt="image" 
      width="250" height="250" id="filter1" />
      <h4>
         filter: contrast(55%)
      </h4>
      <img src="/https/www.tutorialspoint.com/css/images/content.png" alt="image" 
      width="250" height="250" id="filter2" />
   </div>
   <h4>
      Image used: 
   </h4>
   <img src="/https/www.tutorialspoint.com/css/images/content.png" alt="image" 
   width="200" height="200" />

</body>

</html>

Filter Property with Drop Shadow Function

To add a background shadow to an element, we use the drop-shadow() function. We specify the values in pixels and color formats. It takes upto 4 values. First value is x-offset, second value is y-offset, third is blur-radius and fourth is the color of the shadow. This is shown in the flollowing example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         display: grid;
         gap: 10px;
      }

      #filter1 {
         filter: drop-shadow(15px 20px 15px grey);
      }

      #filter2 {
         filter: drop-shadow(40px 40px 40px red);
      }
   </style>
</head>

<body>
   <h2>
      CSS filter property
   </h2>
   <div>
      <h4>
         filter: drop-shadow (15px 20px 15px grey)
      </h4>
      <img src="/https/www.tutorialspoint.com/css/images/content.png" alt="image" 
         width="250" height="250" id="filter1" />
      <h4>
         filter: drop-shadow (40px 40px 40px red)
      </h4>
      <img src="/https/www.tutorialspoint.com/css/images/content.png" alt="image" 
      width="250" height="250" id="filter2" />
   </div>


</body>

</html>

Filter Property with Grayscale Function

To highlight the black and white features in an element, we use the grayscale() function. We specify the values in percentage. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         display: grid;
      }

      #filter1 {
         filter: grayscale(65%);
      }

      #filter2 {
         filter: grayscale(100%);
      }
   </style>
</head>

<body>
   <h2>
      CSS filter property
   </h2>
   <div>
      <h4>
         filter: grayscale(45%)
      </h4>
      <img src="/https/www.tutorialspoint.com/css/images/content.png" alt="image" 
      width="250" height="250" id="filter1" />
      <h4>
         filter: grayscale(100%)
      </h4>
      <img src="/https/www.tutorialspoint.com/css/images/content.png" alt="image" 
      width="250" height="250" id="filter2" />
   </div>
   <h4>
      Image used: 
   </h4>
   <img src="/https/www.tutorialspoint.com/css/images/content.png" alt="image" 
   width="200" height="200" />

</body>

</html>

Filter Property with Hue-Rotate Function

To adjust the hue of an element's colors by rotating the hue angle, we use the hue-rotate() function. We specify the values in degree. The degree value specifies the angle of rotation around the color wheel which creates various color effects and transformations. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         display: grid;
      }

      #filter1 {
         filter: hue-rotate(75deg);
      }

      #filter2 {
         filter: hue-rotate(35deg);
      }
   </style>
</head>

<body>
   <h2>
      CSS filter property
   </h2>
   <div>
      <h4>
         filter: hue-rotate(75deg)
      </h4>
      <img src="/https/www.tutorialspoint.com/css/images/content.png" alt="image" width="250" height="250" id="filter1" />
      <h4>
         filter: hue-rotate(35deg)
      </h4>
      <img src="/https/www.tutorialspoint.com/css/images/content.png" alt="image" width="250" height="250" id="filter2" />
   </div>
   <h4>
      Image used: 
   </h4>
   <img src="/https/www.tutorialspoint.com/css/images/content.png" alt="image" width="200" height="200" />

</body>

</html>

Filter Property with Opacity Function

To adjust the transparency of an element, we use the opacity() function. We specify the values in percentage. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         display: grid;
      }

      #filter1 {
         filter: opacity(35%);
      }

      #filter2 {
         filter: opacity(60%);
      }
   </style>
</head>

<body>
   <h2>
      CSS filter property
   </h2>
   <div>
      <h4>
         filter: opacity(35%)
      </h4>
      <img src="/https/www.tutorialspoint.com/css/images/content.png" alt="image" 
      width="250" height="250" id="filter1" />
      <h4>
         filter: opacity(60%)
      </h4>
      <img src="/https/www.tutorialspoint.com/css/images/content.png" alt="image" 
      width="250" height="250" id="filter2" />
   </div>
   <h4>
      Image used: 
   </h4>
   <img src="/https/www.tutorialspoint.com/css/images/content.png" alt="image" 
   width="200" height="200" />

</body>

</html>

Filter Property with Saturate Function

To adjust the color saturation of an element, we use the saturate() function. We specify the values in percentage. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         display: grid;
      }

      #filter1 {
         filter: saturate(25%);
      }

      #filter2 {
         filter: saturate(65%);
      }
   </style>
</head>

<body>
   <h2>
      CSS filter property
   </h2>
   <div>
      <h4>
         filter: saturate(25%)
      </h4>
      <img src="/https/www.tutorialspoint.com/css/images/content.png" alt="image" 
      width="250" height="250" id="filter1" />
      <h4>
         filter: saturate(65%
      )</h4>
      <img src="/https/www.tutorialspoint.com/css/images/content.png" alt="image" 
      width="250" height="250" id="filter2" />
   </div>
   <h4>
      Image used: 
   </h4>
   <img src="/https/www.tutorialspoint.com/css/images/content.png" alt="image" 
   width="200" height="200" />

</body>

</html>

Filter Property with Sepia Function

To apply a sepia tone to an element, giving it a warm, brownish appearance reminiscent of old photographs, we use the sepia() function. We specify the values in percentage. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         display: grid;
      }

      #filter1 {
         filter: sepia(45%);
      }

      #filter2 {
         filter: sepia(90%);
      }
   </style>
</head>

<body>
   <h2>
      CSS filter property
   </h2>
   <div>
      <h4>
         filter: sepia(45%)
      </h4>
      <img src="/https/www.tutorialspoint.com/css/images/content.png" alt="image" 
      width="250" height="250" id="filter1" />
      <h4>
         filter: sepia(90%)
      </h4>
      <img src="/https/www.tutorialspoint.com/css/images/content.png" alt="image" 
      width="250" height="250" id="filter2" />
   </div>
   <h4>
      Image used: 
   </h4>
   <img src="/https/www.tutorialspoint.com/css/images/content.png" alt="image" 
   width="200" height="200" />

</body>

</html>

Filter Property using Filter URL

To apply an external SVG filter to an element so that we can use custom filter effects defined in an SVG file, which can include complex effects like color adjustments, blurs, and distortions, we have to specify the id of the filter in the url(). This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .myelement {
         filter: url(#pink-flower);
      }

      div {
         display: grid;
         gap: 10px;
         max-width: 300px;
      }

      img {
         width: 100%;
         max-height: 200px;
         object-fit: cover;
      }

      svg {
         height: 0;
      }
   </style>
</head>

<body>
   <svg xmlns="http://www.w3.org/2000/svg">
   <defs>
   <filter id="pink-flower" x="0" y="0" 
   width="100%" height="100%">
   <feComponentTransfer>
   <feFuncR type="linear" slope="1" intercept="0.5">
   </feFuncR>
   <feFuncG type="linear" slope="0.5" intercept="0.5">
   </feFuncG>
   <feFuncB type="linear" slope="0" intercept="1">
   </feFuncB>
   </feComponentTransfer>
   </filter>
   </defs>
   </svg>
   <h2>
      CSS filter property
   </h2>
   <h3>
      filter: url() function
   </h3>
   <div>
      <img src="/https/www.tutorialspoint.com/css/images/content.png" 
      alt="pink flower" />
      <img src="/https/www.tutorialspoint.com/css/images/content.png" 
      alt="blurred pink flower" class="myelement" />
   </div>
</body>

</html>

Supported Browsers

Property Chrome Edge Firefox Safari Opera
filter 53.0 13.0 35.0 9.1 40.0
css_reference.htm
Print Page
Previous
Next
Advertisements