Shadow or darkening overlays can be useful for providing contrast between a container’s background and content, as well as providing an easy way to differentiate presentation for button mouseovers and similar situations. Older methods of providing such useful inner shadows relied on using an extra div or other container, to which one would apply a color and opacity. However, there’s a better way.
The desired effect can be achieved using two related tricks: the now well-supported opacity feature of rgba colors, as well as the “inset” property of the CSS3 box shadow which applies the box shadow inside an element. The trick is to set the shadow width to greater than half the size of the element (any greater size will do), to ensure that the shadow covers the entire element. Using this approach, one might specify the following to achieve a 50% shading:
box-shadow: rgba(0, 0, 0, .5) 0 0 0 1000000px inset;
Digital Rumpus 