css 3 y html 5 creando máscaras

¿Es posible crear esto usando css 3?

enter image description here

Como puede ver, hay un círculo transparente pero el contenedor tiene un fondo negro con 50% de opacidad.

Pensé que podría ser factible usar svg pero no parece posible.

Simplemente puede usar box-shadow estableciendo el cuarto argumento como la distancia sombreada, simplemente configúrelo en un número alto para asegurarse de que está cubriendo toda el área de la pantalla.

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

Esto generará una máscara de círculo con 200px de diámetro, luego puede colocarla en la pantalla usando arriba / izquierda donde lo desee.

Aquí hay un códec si quiere verlo en acción http://codepen.io/luigimannoni/pen/cbpwL

Aclamaciones

Puede usar la máscara que se superpone a todo el contenido y usar un valor de z-index mayor que la máscara para el elemento de círculo.