The saturate() function is an inbuilt function in CSS that is used to super-saturate or desaturate the input image.
Syntax:
saturate( amount )
Parameters: This function accepts a 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. The below example illustrates 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= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 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