Founder's blog

CSS: always use transparent colors for your shadows

Nov 20 2018 :: by Alex

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.


'CSS: always use transparent colors for your shadows' was written by Alex by Alex. CEO, founder


comments