title: CSS3 spotlight effect using a rounded rectangle with gradients
body: <p>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.</p>
  
  <p>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 <code>div</code> on top of the existing interface that allows portions to be highlighted:</p>
  
  <blockquote>
    <p><a href="https://web.archive.org/web/20120414095101/http://svay.com/experiences/css3-spotlight" rel="nofollow">https://web.archive.org/web/20120414095101/http://svay.com/experiences/css3-spotlight</a></p>
  </blockquote>
  
  <p>However, the CSS <code>radial-gradient</code> 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)?</p>