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).
Alex has founded Jitbit in 2005 and is a software engineer passionate about customer support.