CSS change background's alpha value based on screen brightness

I want to change the brightness of my background image based on the user’s screen brightness. Let me demonstrate this with a simple example.

For example, let these be my html and css files:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.hero{
    width: 100%;
    height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url('https://cdn.decorilla.com/online-decorating/wp-content/uploads/2018/10/modern-interior-design-grey-living-room2.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content{
    width: 50%;
}

.content h1{
    color: #fff;
    text-align: center;
    font-size: 2rem;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="hero">
        <div class="content">
            <h1>My Test Text!</h1>
        </div>
    </div>
</body>
</html>

The result is good only when the user’s screen brightness is low. When the screen brightness is increased, the foreground does not stand out from the background. Instead, An alpha value of 0.75 looks good for bright screens.

So is there any way to change the alpha value of the background based on the user’s screen brightness? Any help would be appreciated.

4 thoughts on “CSS change background's alpha value based on screen brightness”

Leave a Comment