Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Setting the Image Brightness using CSS3

CSS Web Development Front End Technology

To set image brightness in CSS, use the filter property with the brightness() function. The value 0% makes the image completely black, 100% displays the original image (default), and values above 100% make the image brighter.

Syntax

selector {
    filter: brightness(value);
}

Possible Values

Value Description
0% Completely black image
100% Original image (default)
> 100% Brighter than original
< 100% Darker than original

Example: Brightening an Image (120%)

The following example makes an image 20% brighter than the original −

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        display: flex;
        gap: 20px;
        align-items: center;
        margin: 20px 0;
    }
    
    .original {
        filter: brightness(100%);
    }
    
    .bright {
        filter: brightness(120%);
    }
    
    img {
        width: 150px;
        height: 100px;
        border: 2px solid #ccc;
    }
    
    .label {
        font-weight: bold;
        margin: 5px 0;
    }
</style>
</head>
<body>
    <div class="container">
        <div>
            <div class="label">Original (100%)</div>
            <img class="original" src="/css/images/sample.jpg" alt="Sample">
        </div>
        <div>
            <div class="label">Bright (120%)</div>
            <img class="bright" src="/css/images/sample.jpg" alt="Sample">
        </div>
    </div>
</body>
</html>

Two images appear side by side - the left image shows normal brightness, while the right image appears noticeably brighter with enhanced luminosity.

Example: Dark Image (0%)

Setting brightness to 0% creates a completely black image −

<!DOCTYPE html>
<html>
<head>
<style>
    .dark-image {
        filter: brightness(0%);
        width: 200px;
        height: 120px;
        border: 2px solid #333;
    }
    
    .comparison {
        display: flex;
        gap: 20px;
        margin: 20px 0;
    }
</style>
</head>
<body>
    <div class="comparison">
        <div>
            <p><b>Original Image</b></p>
            <img src="/css/images/sample.jpg" alt="Original" style="width: 200px; height: 120px;">
        </div>
        <div>
            <p><b>0% Brightness</b></p>
            <img class="dark-image" src="/css/images/sample.jpg" alt="Dark">
        </div>
    </div>
</body>
</html>

Two images displayed side by side - the original image on the left and a completely black rectangle on the right where the brightness filter has made the image completely dark.

Example: Multiple Brightness Values

This example demonstrates various brightness levels from very dark to very bright −

<!DOCTYPE html>
<html>
<head>
<style>
    .brightness-demo {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
        margin: 20px 0;
    }
    
    .brightness-item {
        text-align: center;
    }
    
    .brightness-item img {
        width: 100px;
        height: 80px;
        border: 1px solid #ddd;
    }
    
    .dark { filter: brightness(30%); }
    .normal { filter: brightness(100%); }
    .bright { filter: brightness(150%); }
    .very-bright { filter: brightness(200%); }
</style>
</head>
<body>
    <div class="brightness-demo">
        <div class="brightness-item">
            <p><b>30%</b></p>
            <img class="dark" src="/css/images/sample.jpg" alt="Dark">
        </div>
        <div class="brightness-item">
            <p><b>100%</b></p>
            <img class="normal" src="/css/images/sample.jpg" alt="Normal">
        </div>
        <div class="brightness-item">
            <p><b>150%</b></p>
            <img class="bright" src="/css/images/sample.jpg" alt="Bright">
        </div>
        <div class="brightness-item">
            <p><b>200%</b></p>
            <img class="very-bright" src="/css/images/sample.jpg" alt="Very Bright">
        </div>
    </div>
</body>
</html>

Four images displayed in a grid showing progressive brightness levels: the first image appears dark (30%), the second shows normal brightness (100%), the third is noticeably brighter (150%), and the fourth is very bright with enhanced luminosity (200%).

Conclusion

The CSS filter: brightness() property provides an easy way to adjust image brightness. Use values below 100% to darken images, 100% for original appearance, and above 100% to brighten them.

Updated on: 2026-03-15T13:44:33+05:30

16K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements