Shadow as background transition

How to use it

Add a drop shadow to the background transition between one section of a page and the next.

When to use it

If you want to suggest that one part of the page is more important than another, but don't want to add a container for the content in that section, you can apply a drop shadow to the whole, at the place where the background transitions from one colour to another. This puts it "in front" of the section below it.

This is very similar to applying a shadow to the main navigation of a page, though it's arguable whether or not the main navigation's background is part of the page's background, or a foreground element with its own background.

What to watch out for

If you're applying a drop shadow to a section of the page, make sure it looks OK compared to the section above it. Unless you're applying shadows to every background transition, you might end up with inconsistent looking background transitions, in terms of visual hierarchy.

Examples

Example