Css 3 And Html 5 Creating Masks

Is it possible to create this using css 3? As you can see, there is a transparent circle but the container has a black background with 50% opacity. I thought it might be doable us

Solution 1:

You can simply use box-shadow by setting the fourth argument as the shadow spread distance, just set it at an high number so you are certain you're covering the whole screen area.

.mask {
  position: fixed;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  box-shadow: 0px 0px 0px 99999px rgba(50, 50, 50, 0.8);
}

This will generate a circle mask with 200px diameter, then you can position it on the screen using top/left wherever you like.

Here's a codepen if you want to see it in action http://codepen.io/luigimannoni/pen/cbpwL

Cheers

Solution 2:

You can use the mask that overlays the whole content and use higher z-index value than the mask for the circle element.