I am trying to make an effect in which the whole page would be dark except for a specific part that'll be transparent. That part would be a circle which would be moving randomly. Now where ever this circle goes on the page, content under the circle would be able to be seen while the whole remaining page would remain dark.

Where I AM?
I have created the script that'll move the circle randomly on the page but i can't get the effect. Don't know what to do.

Please take a look on the following image. It'll give you a better idea of what i am trying to achieve.

Now consider that this transparent circle is moving randomly on the page ( i have already made the script for that). Kindly take a look on this fiddle. It'll show where i am. Thank you..

I am trying to make an effect in which the whole page would be dark except for a specific part that'll be transparent. That part would be a circle which would be moving randomly. Now where ever this circle goes on the page, content under the circle would be able to be seen while the whole remaining page would remain dark.

Where I AM?
I have created the script that'll move the circle randomly on the page but i can't get the effect. Don't know what to do.

Please take a look on the following image. It'll give you a better idea of what i am trying to achieve.

Now consider that this transparent circle is moving randomly on the page ( i have already made the script for that). Kindly take a look on this fiddle. It'll show where i am. Thank you..

• javascript
• jquery
• html
• css

2 Answers 2

This is simple matter of adding a giant box shadow to the moving div.

No extra elements required.

Unprefixed CSS

box-shadow: 0 0 0 9999px black;

JSfiddle Demo

Try using CSS Masks:

Just draw a circle in photoshop and use CSS techniques to apply the mask on the image.

CSS:

 -webkit-mask-image: url('image.png');

More info here: http://thenittygritty.co/css-masking and here: http://www.html5rocks./en/tutorials/masking/adobe/