Skip to content
Related Articles

Related Articles

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
            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
            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
            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
            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
            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
            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
            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
            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
            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
            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
            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
            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 :