Dim entire screen except a fixed area?

Question

You could do it with just one div and give it a box-shadow.

EDIT:
as @Nick Shvelidze pointed out, you should consider adding pointer-events: none

Added vmax value for box-shadow as @Prinzhorn suggested

div {
  position: fixed;
  width: 200px;
  height: 200px;
  top: 50px;
  left: 50px;
  /* for IE */
  box-shadow: 0 0 0 1000px rgba(0,0,0,.3);
  /* for real browsers */
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.3);
  pointer-events: none;
}

<div></div>

Leave a Comment Cancel reply