CSS: always use transparent colors for your shadows

I see a lot of websites and apps using "box-shadow" like this box-shadow: 0px 0px 20px 5px #ddd. Which literally means "lets have a #ddd-colored shadow, with zero offset, 5 pixels wide and 20 pixels blurred".

Which is perfectly fine, for the most part.

There's only one problem:

See, the shadow looks pretty cool when positioned over the light background. But as soon as it moves over to the dark side (tm) - you get the ugly "glow" around your box.

Use this instead box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.15) which now says "use a black shadow, but make it 15% transparent.

Perfectly supported by IE9 and later. And as a bonus you get more consistent shadows accross Firefox/Chrome which has always been an issue ("grey" shadows look darker in Firefox than Chrome).