Open In App
Related Articles

CSS saturate() Function

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

The saturate() function is an inbuilt function in CSS which is used to super-saturate or desaturates the input image. 

Syntax:

saturate( amount )

Parameters: This function accepts single parameter amount, which holds the amount of conversion. The value of the parameter is set in terms of number or percentage. The value 0% represents completely unsaturated and 100% represents completely saturated you can increase the saturation more. Below example illustrate the saturate() function in CSS: 

Example: 

html

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

                    

Output:

  

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

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


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