How to Dim entire screen except a fixed area using JavaScript ?

Last Updated : 20 Jun, 2023

Given an HTML document and the task is to dim the entire screen except for one or few elements. It needs to be done to get the attention of the user on some part of the page using JavaScript.

Approach:

Select the element(s) for the focus.
Use the box-shadow property to make that area visible.

Example 1: This example focuses a div of the HTML document and another part is made dim.

html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        How to Dim entire screen except a 
        fixed area using JavaScript ?
    </title>
 
    <style>
        .dim {
 
            /* For Internet Explorer */
            box-shadow: 0 0 0 1000px rgba(0, 0, 0, .3);
 
            /* For other browsers */
            box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .3);
        }
    </style>
</head>
 
<body>
    <h1 style="color:green;" id="h1">
        GeeksforGeeks
    </h1>
 
    <h3>
        Click on button to make everything 
        dim on the screen.
    </h3>
 
    <button onclick="GFG_Fun()">
        click here
    </button>
 
    <h3 id="GFG" style="color:green;">
    </h3>
 
    <script>
        let elm = document.getElementById('GFG');
        let heading = document.getElementById('h1');
        function GFG_Fun() {
            heading.classList.add('dim');
            elm.innerHTML = "Everything becomes dim "
                + "except heading(h1)";
        }
    </script>
</body>
 
</html>

Output:

How to Dim entire screen except a fixed area using JavaScript ?

Example 2: In this example, the button is focused, Also pointer-events property is set to none, and another part is made dim.

html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        How to Dim entire screen except a
        fixed area using JavaScript ?
    </title>
 
    <style>
        .dim {
 
            /* For Internet Explorer */
            box-shadow: 0 0 0 1000px rgba(0, 0, 0, .3);
 
            /* For other browsers */
            box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .3);
            pointer-events: none;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
 
    <h3>
        Click on button to make everything 
        dim on the screen.
    </h3>
 
    <button onclick="GFG_Fun()" id="button">
        click here
    </button>
 
    <h3 id="GFG" style="color:green;">
    </h3>
 
    <script>
        let elm = document.getElementById('GFG');
        let btn = document.getElementById('button');
 
        function GFG_Fun() {
            btn.classList.add('dim');
            elm.innerHTML = "Everything becomes dim"
                + " except button";
        }
    </script>
</body>
 
</html>