I've noticed recently that both of the Web messaging apps I use the most, Gmail and Facebook, have introduced what I'm calling Scroll Shadows. (Maybe they're actually called that, I don't know! lol) The purpose of a Scroll Shadow is to subtly indicate to the user that the content they are scrolling has now scrolled under another page element. In Gmail, this effect looks like this:

Before scrolling...

After scrolling...

In Facebook the effect looks like this:

Before scrolling...

After scrolling...

In general, I think it's a great idea. It's minimal, it serves a discrete function and it has the potential to add some depth to a page. So what's my beef? I don't think either of these was implemented very well. How do I know? Because one of these sites did implement the concept well, on a different part of the very same page! Can you guess which one? If you said testing-subtle-variations-is-our-middle-name-Google, then you're right! Here's what the Scroll Shadow for the Ad section of the same Gmail message page looks like after scrolling:

It's a subtle difference:

• Gradients: It's hard to see directly but the Ad version has four shades of gray in it's shadow (Facebook has one and the other Gmail version has two). This makes the transition in the Ad version "under" the top element much smoother and "believable" as a shadow than in the other two variations.
• Edge: Both the Ad version and the Facebook versions have a defined darker "edge" (the other Gmail version has no edge at all). The edge serves to deleneate the "thing" that is casting the shadow. Without it, the shadow looks a little out of place.

Here's a close up of the Ad version:

It's hard to know why Google is using two different shadow styles on the same page (could be A/B testing, could be different teams working on different sections) but I know what I like: the style used in the Ad section is the best implementation of this idea.