Gradient as background transition

How to use it

Use a short gradient to transition the background of the page or an element from one colour to another.

When to use it

If you don’t want a hard transition between background colours for some reason—perhaps your brand suits a more wispy transition better—consider this alternative. It’s softer.

What to watch out for

You can get some strange visual effects if you choose the wrong colours or don’t get the transition right, such as a seemingly brighter line at the beginning of the second colour. You might have to play around with combinations and settings until it looks right.

Examples