Skip to content
Related Articles

Related Articles

Improve Article

CSS | filter Property

  • Last Updated : 23 Jul, 2021

The filter property is used to set the visual effect of an element. This property is mostly used in image content. 
Syntax: 
 

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

Note: More then one filter can be added to the HTML element. 
Example: 
 

img {
   filter: brightness(20%) blur(20px);
}

This example applying two filter function to the image element in a webpage.
Filter function: 
 

  • none: It is the default value and it does not apply any effect.
    Example: 
     

html




<!DOCTYPE html>
<html>
     
<head>
    <title>CSS filter property</title>
    <style>
        img {
            filter: none;
        }
    </style>
</head>
<body>
    <div>
        <img src =
        alt="Geeks image" >
    </div>
</body>
 
</html>                   
  • Output: 
     

  • brightness(): It sets the brightness of the element. If the brightness is 0% then it is completely black and if the brightness is 100% then it is same as original. The values greater than 100% result is brighter elements.
    Example: 
     

html




<!DOCTYPE html>
<html>
     
<head>
    <title>CSS filter property</title>
    <style>
        img {
            filter: brightness(10%);
        }
    </style>
</head>
<body>
    <div>
        <img src =
        alt="Geeks image" >
    </div>
</body>
 
</html>                   
  • Output: 
     



  • grayscale(): It converts the element colors into black and white. The grayscale 0% indicates the original element and 100% indicate completely grayscale element.
    Example: 
     

html




<!DOCTYPE html>
<html>
     
<head>
    <title>CSS filter property</title>
    <style>
        img {
            filter: grayscale(70%);
        }
    </style>
</head>
<body>
    <div>
        <img src =
        alt="Geeks image" >
    </div>
</body>
 
</html>                   
  • Output: 
     

  • sepia(): It converts the image into sepia image where 0% represents the original image and 100% represents completely sepia.
    Example: 
     

html




<!DOCTYPE html>
<html>
     
<head>
    <title>CSS filter property</title>
    <style>
        img {
            filter: sepia(50);
        }
    </style>
</head>
<body>
    <div>
        <img src =
        alt="Geeks image" >
    </div>
</body>
 
</html>                   
  • Output: 
     

  • contrast() It helps to adjust the contrast of the element. The 0% contrast indicate complete black element and 100% contrast indicate original element.
    Example: 
     

html




<!DOCTYPE html>
<html>
     
<head>
    <title>CSS filter property</title>
    <style>
        img {
            filter: contrast(50);
        }
    </style>
</head>
<body>
    <div>
        <img src =
        alt="Geeks image" >
    </div>
</body>
 
</html>                   
  • Output: 
     

  • saturate(): It is used to set saturation of element. The 0% saturate indicate element completely unsaturated and 100% saturate indicate the original image. The value greater than 100% result is super-saturated element.
    Example: 
     

html




<!DOCTYPE html>
<html>
     
<head>
    <title>CSS filter property</title>
    <style>
        img {
            filter: saturate(50);
        }
    </style>
</head>
<body>
    <div>
        <img src =
        alt="Geeks image" >
    </div>
</body>
 
</html>                   
  • Output: 
     

  • blur(): It applies blur effect to the element. If blur value is not specified then it takes 0 as default value.
    Example: 
     

html




<!DOCTYPE html>
<html>
     
<head>
    <title>CSS filter property</title>
    <style>
        img {
            filter: blur(5px);
        }
    </style>
</head>
<body>
    <div>
        <img src =
        alt="Geeks image" >
    </div>
</body>
 
</html>                   
  • Output: 
     

  • opacity(): It sets the opacity effect of the image. The 0% opacity indicate the element is completely transparent and if opacity is 100% then it indicate the original image.
    Example: 
     

html




<!DOCTYPE html>
<html>
     
<head>
    <title>CSS filter property</title>
    <style>
        img {
            filter: opacity(0.5);
        }
    </style>
</head>
<body>
    <div>
        <img src =
        alt="Geeks image" >
    </div>
</body>
 
</html>                   
  • Output: 
     

  • hue-rotate(): It applies a hue rotation to the image. The value defines the number of degrees around the color circle the image samples will be adjusted. The default value is 0 degree and it represents the original image.
    Example: 
     

html




<!DOCTYPE html>
<html>
     
<head>
    <title>CSS filter property</title>
    <style>
        img {
            filter: hue-rotate(45deg);
        }
    </style>
</head>
<body>
    <div>
        <img src =
        alt="Geeks image" >
    </div>
</body>
 
</html>                   
  • Output: 
     

  • invert(): It inverts the element. The default value is 0% and it represents the original image. The 100% makes the image completely inverted.
    Example: 
     

html




<!DOCTYPE html>
<html>
     
<head>
    <title>CSS filter property</title>
    <style>
        img {
            filter: invert(50);
        }
    </style>
</head>
<body>
    <div>
        <img src =
        alt="Geeks image" >
    </div>
</body>
 
</html>                   
  • Output: 
     

  • drop-shadow(): It applies a drop shadow effect to the element. It accepts h-shadow, v-shadow, blur, spread and color as values. It is not only applied on images, but it can be applied to shapes as it can have same shape as of original one.
    Example: 
     

html




<!DOCTYPE html>
<html>
     
<head>
    <title>CSS filter property</title>
    <style>
        img {
            filter: drop-shadow(16px 18px 15px rgba(255, 0, 0, 0.5));
        }
    </style>
</head>
<body>
    <div>
        <img src =
        alt="Geeks image" >
    </div>
</body>
 
</html>                   
  • Output: 
     


HTML




<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div></div>
<style>
  body {
    background:#F2F2B6;
  }
div {
    width:0;
    position:relative;
    margin:85px 50px;
    border-top:130px solid #FF6D00;
    border-bottom:0px solid transparent;
    border-left:78px solid transparent;
    border-right:74px solid transparent;
    filter: drop-shadow(19px 0 0 #FD4602);
  }
</body>
</html>
  • Output:

  • From the output, you can observe we can get same shape using drop shadow and if you increase x-offset, it can move toward right, if you apply y-offset it move towards bottom. Similarly, you can design any shape and if you apply drop shadow property, it generates shadow to that image
  • initial: It sets the filter property to its default value.
    Example: 
     

html




<!DOCTYPE html>
<html>
     
<head>
    <title>CSS filter property</title>
    <style>
        img {
            filter: initial();
        }
    </style>
</head>
<body>
    <div>
        <img src =
        alt="Geeks image" >
    </div>
</body>
 
</html>                   
  • Output: 
     

 
Supported Browsers: The browsers supported by filter property are listed below: 
 

  • Google Chrome 53.0, 18.0 -webkit-
  • Internet Explorer 13.0
  • Firefox 35.0
  • Safari 9.1, 6.0 -webkit-
  • Opera 40.0, 15.0 -webkit-

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :