I know this is a frequently asked question and I have looked at many related questions/answers, still I am not able to get it to work. I want to dim the entire screen except for certain portions. in one case the portion that should not be dimmed is the region **between** two concentric squares. I want a solution that uses only javascript and css. It should not use any 3rd party library like jquery. I am not worried about old browsers. As long as it works on latest browsers I am okay with whatever css3 it needs. Some other restrictions I have - I am using absolute positioning in my app. All elements are absolutely positioned.

**EDIT:** thanks for helping me with you answers. I think I should have mentioned I want to dim the screen in response to an event like user clicking on a button. That event dims the screen except for certain areas that I want to highlight. When user clicks on the button again, the screen is restored. When the screen is dimmed user should not be able to do any interaction with DOM elements in the dimmed regions.

This is my js fiddle: <http://jsfiddle.net/z1Lj7h90/>

**HTML**: 

```
<div id="main">
    <div id="outer"></div>
    <div id="inner"></div>
    <button id="mybutton">Highlight</button>
    <div id="darkness"></div>    
</div>

```

**CSS**: 

```
#mybutton
{
position: absolute; top: 450px; left:100px; z-index:10;
}

#main {
    position: relative;
    z-index:10;   
    width:500px;
    height:500px;
    overflow:hidden;
}

#darkness
{
    z-index:5;
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.fadein
{   
    background:rgba(0,0,0,0.75);
}

#outer
{
    position:absolute;
    top:10px;
    left:10px;
    width:400px;
    height:400px;
    border:2px solid red;
}

#inner
{
    position:absolute;
    top:40px;
    left:40px;
    width:340px;
    height:340px;
    border:2px solid blue;
}

```

**JS:** 

```
var button = document.getElementById("mybutton");
button.addEventListener("click", toggle);
var ff = false;
function toggle()
{ 
    var darkness = document.getElementById("darkness");
  darkness.classList.toggle("fadein");
    if (ff)
    {
        dice.style.zIndex = originalZIndex;
        button.innerText = "Highlight";
    }
    else
    {
        dice.style.zIndex = 10;
        button.innerText = "Restore";
    }
    ff = !ff
}

```