CSS Function - contrast()

Quiz

CSS contrast() function sets the contrast of an element. It is used with the CSS filter property. The value 0 makes the image completely gray, 100% (1) is the default value displaying the original image. The contrast values above 100% increase the contrast, while the values less than 0 makes the image greyish.

Syntax

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

filter: contrast(amount);

Parameter

CSS contrast() function accepts a single optional parameter (amount) that specifies the contrast level. If the amount is not specified, 1 is used as the default value.

Examples of CSS contrast() Function

The following examples illustrate the use of the CSS contrast() function. The image can be made more greyish or more vivid using the CSS contrast() function.

Setting contrast of Image

In this example, we have set the contrast level of an image. The image is displayed at contrast levels of 0, 50%, 100%, and 150%. As we increase the contrast level, the image color changes from greyish to more vivid.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS contrast() Function</title>
    <style>
        .container {
            width: 400px;
            border: 2px solid #04af2f;
            padding: 20px;
            margin: 10px;
            display: inline-block;
        }
        .img1 {
            filter: contrast(0);
        }
        .img2 {
            filter: contrast(50%);
        }
        .img3 {
            filter: contrast(100%);
        }
        .img4 {
            filter: contrast(150%);
        }
    </style>
</head>
<body>
    <h2>CSS contrast() Function</h2>
    <div class="container">
        <h3>Image at contrast(0): </h3>
        <img class="img1" src="/html/images/test.png" alt="logo">
    </div>
    <div class="container">
        <h3>Image at contrast(50%): </h3>
        <img class="img2" src="/html/images/test.png" alt="logo">
    </div>
    <div class="container">
        <h3>Image at contrast(100%): </h3>
        <img class="img3" src="/html/images/test.png" alt="logo">
    </div>
    <div class="container">
        <h3>Image at contrast(150%): </h3>
        <img class="img4" src="/html/images/test.png" alt="logo">
    </div>
</body>
</html>

Changing Image Contrast on Hover

In this example, we have changed the contrast of an image upon hovering over it. The image contrast increases when hovered.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS contrast() Function</title>
    <style>
        img:hover {
            filter: contrast(200%);
        }
    </style>
</head>
<body>
    <h2>CSS contrast() Function</h2>
    <p>
        <strong>Hover over this image to change its contrast.</strong>
    </p>
    <img src="/html/images/test.png" alt="logo">
</body>
</html>

Supported Browsers

Function
contrast()	18	12	35	6	15

Print Page