Gradient as element divider

How to use it

For some part of an element, apply a background gradient that very subtly separates it from the other sections, and not across the whole dividing edge.

When to use it

If you want to highlight the content certain part of an element, or divide it for some other reason, but do not want to fully separate the two, you can use a gradient like this. It allows you to connect the two areas at some part of the dividing line, because the background colours flow into each other at that point.

What to watch out for

There's a fine line between subtle and obvious here, so make sure it's noticeable, but not too noticeable.

Examples

Example