CSS Function - saturate()

Quiz

CSS saturate() function sets the saturation level of an element. It is used with the CSS filter property. A value of 0% makes the image completely unsaturated (grayscale), 100% is the default value and represents the original saturation. The value above 100% increases the saturation level.

Syntax

The syntax for the CSS saturate() function is as follows:

filter: saturate(amount);

Parameter

The CSS saturate() function accepts a single optional parameter (amount) that specifies the saturation level of an element. If the amount is not specified, 1 or 100% is used as the default value.

Examples of CSS saturate() Function

The following examples illustrate the use of the CSS saturate() function. It is used to increase or decrease the color intensity of an element.

Setting Saturation of an Image

In this example, we apply different saturation levels to an image.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS saturate() Function</title>
    <style>
        .container {
            width: 400px;
            border: 2px solid #04af2f;
            padding: 20px;
            margin: 10px;
            display: inline-block;
        }
        .img1 {
            filter: saturate(0%);
        }
        .img2 {
            filter: saturate(50%);
        }
        .img3 {
            filter: saturate(100%);
        }
        .img4 {
            filter: saturate(200%);
        }
    </style>
</head>
<body>
    <h2>CSS saturate() Function</h2>
    <div class="container">
        <h3>Image at saturate(0%): </h3>
        <img class="img1" src="/?originalUrl=https%3A%2F%2Fwww.tutorialspoint.com%2Fhtml%2Fimages%2Ftest.png" alt="logo">
    </div>
    <div class="container">
        <h3>Image at saturate(50%): </h3>
        <img class="img2" src="/?originalUrl=https%3A%2F%2Fwww.tutorialspoint.com%2Fhtml%2Fimages%2Ftest.png" alt="logo">
    </div>
    <div class="container">
        <h3>Image at saturate(100%): </h3>
        <img class="img3" src="/?originalUrl=https%3A%2F%2Fwww.tutorialspoint.com%2Fhtml%2Fimages%2Ftest.png" alt="logo">
    </div>
    <div class="container">
        <h3>Image at saturate(200%): </h3>
        <img class="img4" src="/?originalUrl=https%3A%2F%2Fwww.tutorialspoint.com%2Fhtml%2Fimages%2Ftest.png" alt="logo">
    </div>
</body>
</html>

Changing Saturation on Hover

In this example, the saturation of an image changes when hovered over.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS saturate() Function</title>
    <style>
        img:hover {
            filter: saturate(200%);
        }
    </style>
</head>
<body>
    <h2>CSS saturate() Function</h2>
    <p>
        <strong>Hover over this image to increase its saturation.</strong>
    </p>
    <img src="/?originalUrl=https%3A%2F%2Fwww.tutorialspoint.com%2Fhtml%2Fimages%2Ftest.png" alt="logo">
</body>
</html>

Supported Browsers

Function
saturate()	18	12	35	6	15

Print Page