CSS | filter Property

Last Updated : 08 Aug, 2019

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:

<!DOCTYPE html> 
<html> 
      
<head> 
    <title>CSS filter property</title> 
    <style> 
        img { 
            filter: none; 
        } 
    </style> 
</head> 
<body> 
    <div> 
        <img src =  
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" 
        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:

<!DOCTYPE html> 
<html> 
      
<head> 
    <title>CSS filter property</title> 
    <style> 
        img { 
            filter: brightness(10%); 
        } 
    </style> 
</head> 
<body> 
    <div> 
        <img src =  
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" 
        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:

<!DOCTYPE html> 
<html> 
      
<head> 
    <title>CSS filter property</title> 
    <style> 
        img { 
            filter: grayscale(70%); 
        } 
    </style> 
</head> 
<body> 
    <div> 
        <img src =  
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" 
        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:

<!DOCTYPE html> 
<html> 
      
<head> 
    <title>CSS filter property</title> 
    <style> 
        img { 
            filter: sepia(50); 
        } 
    </style> 
</head> 
<body> 
    <div> 
        <img src =  
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" 
        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:

<!DOCTYPE html> 
<html> 
      
<head> 
    <title>CSS filter property</title> 
    <style> 
        img { 
            filter: contrast(50); 
        } 
    </style> 
</head> 
<body> 
    <div> 
        <img src =  
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" 
        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:

<!DOCTYPE html> 
<html> 
      
<head> 
    <title>CSS filter property</title> 
    <style> 
        img { 
            filter: saturate(50); 
        } 
    </style> 
</head> 
<body> 
    <div> 
        <img src =  
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" 
        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:

<!DOCTYPE html> 
<html> 
      
<head> 
    <title>CSS filter property</title> 
    <style> 
        img { 
            filter: blur(5px); 
        } 
    </style> 
</head> 
<body> 
    <div> 
        <img src =  
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" 
        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:

<!DOCTYPE html> 
<html> 
      
<head> 
    <title>CSS filter property</title> 
    <style> 
        img { 
            filter: opacity(0.5); 
        } 
    </style> 
</head> 
<body> 
    <div> 
        <img src =  
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" 
        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:

<!DOCTYPE html> 
<html> 
      
<head> 
    <title>CSS filter property</title> 
    <style> 
        img { 
            filter: hue-rotate(45deg); 
        } 
    </style> 
</head> 
<body> 
    <div> 
        <img src =  
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" 
        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:

<!DOCTYPE html> 
<html> 
      
<head> 
    <title>CSS filter property</title> 
    <style> 
        img { 
            filter: invert(50); 
        } 
    </style> 
</head> 
<body> 
    <div> 
        <img src =  
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" 
        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.

Example:

<!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 =  
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" 
        alt="Geeks image" > 
    </div> 
</body> 
  
</html>                     

Output:

initial: It sets the filter property to its default value.

Example:

<!DOCTYPE html> 
<html> 
      
<head> 
    <title>CSS filter property</title> 
    <style> 
        img { 
            filter: initial(); 
        } 
    </style> 
</head> 
<body> 
    <div> 
        <img src =  
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" 
        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

Related Articles