Circular highlight css3

Question

how to make a circular highlight over any object on a site....

I been looking around and can't find almost any documentation for this. Although I seem to believe that anything is possible now with css, something tells me this would only be available with something like canvas and take a lot of memory.

The only other post I've seen about this is this one... (jquery) Blackout the entire screen and highlight a section of the page? although they didnt address the circular issue there

I've seen on a few sites how to highlight a certain element, but how exactly would you make the highlighted area a circle? By only adding z-index to make a square element show above the overlay, it seems impossible to make the area a circle..

Maybe I could z-index every element that would be included in the circle and create a shadow around the edges the same color as the overlay(but if the spotlight needs to run onto part of the background i would need to include the entire background and that could turn ugly)...this may work actually, in certain cases, but that sounds a bit jenky, no?

anyone have a good solution for highlighting objects on a page but that highlight being a circle / almost like spotlighting a element...

Answer 1

You can do this with border-radius and box-shadow at least that's the only way I can think of with pure css

What you do is you make an element that is circle with a transparent background, then you give it a box-shadow completely black that will fill the whole of your page, and you can get some amazing effects.

Example code

#torch{
    width: 200px;
    height: 200px;
    background: transparent;
    border-radius: 50%;
    position: fixed;
    box-shadow: 0px 0px 0px 2000px #000, 0px 0px 50px inset;
}

Don't forget to add your prefixes -moz-, -webkit- ..etc and don't forget your z-index if you need it.

Demo at JSFiddle