How to create a transparent circle?

Question

Is there any way to get this effect in CSS?

I am trying to play with this css, but it only cuts the first layer.

div{ width:300px; height:300px; position:relative; overflow:hidden; } div:before{ content:''; position:absolute; bottom:50%; width:100%; height:100%; border-radius:100%; box-shadow: 0px 300px 0px 300px #448CCB; } 

Answer 1

The easiest way is to use a transparent div with overflow hidden (gray)

than inside, just put a circle with a shadow box with a really big spread.

 html, body{height:100%;} body{ background: url(http://web-vassets.ea.com/Assets/Richmedia/Image/Screenshots/FIFA-Street-London1web.jpg?cb=1330546446) 50% / cover; } .hasCircle{ width:150px; height:300px; position:relative; overflow:hidden; float:left; } .hasCircle:after{ content:" "; position:absolute; left:0; right:0; margin:100px auto; width:100px; height:100px; border-radius:50%; box-shadow: 0 0 0 1000px #444; } 

 <div class="hasCircle"></div> <div class="hasCircle"></div> <div class="hasCircle"></div> 

As you can see above, I used the :after pseudo-element, which may interfere with the display of some text in the .hasCircle (due to the overlapping pseudo-element), but in order to get the idea, you can do this using a real element like:

 <div class="boxTransparentOverflow"> <div class="theTransparentCircleWithGraySpread"></div> Some text </div>