Is there a golden rule to create attractive shadows for websites(Specifically accessible from desktop browsers)?
The reason I'm asking is that I have a perception that some shadows look better than others.
I think, for desktop websites small\sharp shadows under the boxes or no shadow looks best, while shadows with large radius looks old.

  • 1
    This is more a graphic design question.
    – JohnGB
    May 11, 2013 at 0:01

1 Answer 1


The entire point of the shadow is to achieve a separating effect from the rest of the page's content. This is somewhat subjective, but the sharper and more aggressive the shadow the more it distracts me from the actual content, making it "worse". To get a "good" shadow I do the following:

  • I prefer a glow effect (light source is coming behind the person) to a shadow (light source is coming above the person's monitor).
  • All shadows on the page (and preferably the site) have the same light source.
  • The shadow is as subtle as possible. As a rule of thumb, I combine a grey shadow with a 65% opacity and a long (10-20px) blur. This can be hard to fine tune across different monitors, so my setup includes both crappy and awesome monitors.
  • My example below uses the following box-shadow: 0px 0px 18px rgba(153,153,153,0.65)

my shadow

  • 2
    Why don't you respect the "light is from behind rule" for the buttons and text inputs (light is from above) and the crosses (light is from below) and the check box (light is from top left)? May 11, 2013 at 8:57
  • It's mostly an issue of time and diminishing returns. The developers use a library of UI elements, and restyling them all is too time consuming. I'm just trying to get the most bang for my time buck.
    – Stasome
    May 13, 2013 at 17:23

Not the answer you're looking for? Browse other questions tagged or ask your own question.