CSS saturate() Function Last Updated : 30 Aug, 2024 Suggest changes Share Like Article Like Report 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 aboveEdge 12 and aboveInternet Explorer not supportedFirefox 35 and aboveOpera 15 and aboveSafari 6 and above J jit_t Follow 0 Article Tags : Web Technologies CSS CSS-Functions Explore CSS Introduction 3 min read CSS Syntax 3 min read CSS Selectors 6 min read CSS Comments 2 min read CSS Colors 5 min read CSS Borders 5 min read CSS Margins 4 min read CSS Height and Width 4 min read CSS Outline 4 min read CSS Fonts 4 min read My Profile ${profileImgHtml} My Profile Edit Profile My Courses Join Community Transactions Logout Like