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 ugl…

Accepted Answer

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

Circular highlight css3

Solution

Problem

Related problems