CSS3 spotlight effect using a rounded rectangle with gradients

Question

I'm writing an interactive tutorial for a web app that is meant to highlight the various parts of the user interface. The tutorial is meant to spotlight one part at a time and tell the user how to interact with it. You've probably seen something similar on smartphone apps.

For the specific CSS that could be used to spotlight an existing interface, the best solution I've found is using something like this, which is just a div on top of the existing interface that allows portions to be highlighted:

https://web.archive.org/web/20120414095101/http://svay.com/experiences/css3-spotlight

However, the CSS radial-gradient only allows for circles and ellipses, which is strange for user interface elements that are usually rectangular. Is there a way to achieve the same effect but with rounded rectangles (dimmed area is everything outside the rectangle)?

Answer 1

Vals gave an excellent answer, and gave me a great hint to figure out a simple way to get exactly what I wanted. This effect can be achieved with an inset box shadow plus a regular one, and has the added benefit that the spotlight box need only be repositioned to highlight a particular area instead of redrawing a CSS gradient.

Here's the code:

.overlay {
  position: absolute;
  left: 50px;
  top: 50px;
  width: 200px;
  height: 200px;
  border-radius: 20px;  
  box-shadow: 0px 0px 4px 10px rgba(0,0,0,0.5) inset, 0px 0px 0px 1000px rgba(0,0,0,0.5)
}

One can tweak the parameters to make the gradient border softer or more dramatic, and how much it pokes into the spotlight.

Check out the following:

• JSFiddle demo
• Example usage in a tutorials package (code)