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.

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

  1. There is no media-query for detecting brightness. See all media-queries

    There is no JS way of doing it as well. See another question

    It doesn’t make sense to me, if I change the brightness on my monitor the PC doesn’t know about it. Therefore you cannot achieve this.

    The least you can do is switch between dark and light theme using the media-quries, but it is not what you want to achieve, I think.

    For the text you can try to add text-shadow. It may help to see the text better.

    Reply
  2. The browsers does not know the monitor information and settings. This is unlikely
    But you can try this :

    #:before{content:'';/*backgroundcodes*/opacity:.15}
    
    Reply
  3. There is filter properties brightness method which let you relatively change as per screen brightness. Technically, the brightness is still changing as per the screen’s but it gives us leverage to increase or decrease as a constant value.

    filter: brightness(1.5) (MDN)

    Reply

Leave a Comment