Gradient line as background transition

How to use it

Add a thick line between two background sections, with a gradient applied from one side to the other.

When to use it

If you want to add more brand colours to your design, but don't want to use them too much because they're bright, you can use this technique. It'll make a transition between two background sections look more interesting.

What to watch out for

Since this is a thick line, it can act like a very strong separator between two areas of your design. When I've seen this being used, it's to separate the rest of the website from the footer, which is suitable since the footer rarely has anything to do with the rest of the website.

Examples

Example