CSS Function - brightness()

Quiz

CSS brightness() function sets the brightness of an element. It is used with CSS filter property. The value 0 makes the image dark, 100%(1) is the default value displaying original image and the values above 100% would make the image brighter while the values less than 0 makes the image darker.

Syntax

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

filter: brightness(amount);

Parameter

CSS brightness() function accepts a single optional parameter (amount) that specifies the darkness or lightness of the image. If the amount is not specified, 1 is used as the default value.

Examples of CSS brightness() Function

The following examples illustrate the use of the CSS brightness() function. Image can be made darker or lighter using the CSS brightness() function.

Setting brightness of Image

In this we have set the brightness level of an image. The image is displayed at the brightness level of 0, 50%, 100%, and 120%. As we increase the brightness level, color of the image becomes lighter.

Example

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

Changing Image Brightness on Hover

In this example, we have changed the brightness of an image upon hovering it. We have changed the image to black and white by hovering over it.

Example

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

Supported Browsers

Function
brightness()	18	12	35	6	15

Print Page