Background to colour element backgrounds

How to use it

Make a part of your foreground element slightly transparent, and perhaps add a blur effect, to let the background show through.

When to use it

I most often see this in operating systems. Windows 7 had transparent title bars on windows, and many panels in macOS apps, such as Finder, have see-through sections that let the desktop background through. I think the effect is used in these places more often because you'll be moving these windows around a lot, so you'll see the results of the effect more often. In a static website, for example, it's not often that elements move, but if they do, you could apply this effect to make things more visually interesting.

What to watch out for

You might need to apply a blur to the area that is letting the background through, so that whatever background is there doesn't get in the way of reading foreground content.

Examples

Example