Fading background container

How to use it

Use a linear gradient on the border or fill of a background container so that it fades out of view.

When to use it

This is an expressive choice, so you can use it whenever you like. But it has some practical benefits. For example, if the background is varied the container might be visible when it helps contrast the most, and fade away when it doesn’t.

What to watch out for

If the background container around the foreground element is there to help provide contrast between the element and its background, then fading it out isn’t a good idea.

Examples