User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|improve this question

closed as off topic by JohnGB, rk., Benny Skogberg, Matt Obee, Ben Brocka May 11 '13 at 21:50

Questions on User Experience Stack Exchange are expected to relate to user experience within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

This is more a graphic design question. – JohnGB May 11 '13 at 0:01
up vote 5 down vote accepted

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

share|improve this answer
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)? – Gildas Frémont May 11 '13 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 '13 at 17:23

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