Open In App
Related Articles

CSS contrast() Function

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The contrast() function is an inbuilt function which is used to apply a filter to set the contrast of the image. This function adjusts the contrast of the image. 

Syntax:

contrast( amount )

Parameters: This function accepts single parameter amount which holds the amount of contrast. The value of contrast is set in terms of value and percentage. The value 0% represents completely gray image and 100% represents the original image. 

Below example illustrates the contrast() function in CSS: 

Example: 

html

<!DOCTYPE html> 
<html
  
<head
    <title>CSS contrast() Function</title
      
    <style>
        h1 {
            color:green;
        }
        body {
            text-align:center;
        }
        .contrast_effect {
            filter: contrast(10%);
        }
    </style>
</head
  
<body
    <h1>GeeksforGeeks</h1
      
    <h2>CSS contrast() function</h2>
      
    <img class="contrast_effect" src
        alt="GeeksforGeeks logo"
</body
  
</html>    

                    

Output:

  

Supported Browsers: The browsers supported by contrast() function are listed below:

  • Google Chrome 18 and above
  • Edge 12 and above
  • Internet Explorer not supported
  • Firefox 35 and above
  • Safari 6 and above
  • Opera 15 and above

Last Updated : 07 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads