Skip to content
Related Articles
Open in App
Not now

Related Articles

How to increase & decrease Image Brightness in CSS ?

Improve Article
Save Article
  • Last Updated : 31 May, 2022
Improve Article
Save Article

In this article, we will learn about how to increase and decrease image brightness in CSS. CSS (Cascading Style Sheets) is a stylesheet language used to design a webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. It allows you to apply styles on web pages. More importantly, it enables you to do this independent of the HTML that makes up each web page.

The filter property is used to set the visual effect of an element. This property is mostly used in image content for adjusting the image rendering.

Syntax:

filter: none|blur()|brightness()|contrast()|drop-shadow()|
grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();

Example: In the below example we will make use of filter property with none property.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>CSS filter property</title>
    <style>
    body{
        text-align:center;
        background-color:lightgrey;
    }
    img {
        filter: none;
        margin-top:60px;
        width:80%;
    }
    </style>
</head>
<body>
    <div>
        <img src=
            alt="Geeks image">
    </div>
</body>
</html>


Output:

 

Example 2: In the below example we will increase the brightness of the image.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>CSS filter property</title>
    <style>
    body{
        text-align:center;
        background-color:lightgrey;
    }
    img {
        filter: brightness(120%);
        margin-top:60px;
        width:80%;
    }
    </style>
</head>
<body>
    <div>
        <img src=
            alt="Geeks image">
    </div>
</body>
</html>


Output:

 

Example 3: In the below example we will decrease the brightness of the image.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>CSS filter property</title>
    <style>
    body{
        text-align:center;
        background-color:lightgrey;
    }
    img {
        filter: brightness(30%);
        margin-top:60px;
        width:80%;
    }
    </style>
</head>
<body>
    <div>
        <img src=
            alt="Geeks image">
    </div>
</body>
</html>


Output: 

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!