Double background shape

How to use it

Duplicate the shape of an element and use it as the background for that element, twice over. Make each background more transparent or a lighter colour than the previous one.

When to use it

This lets you highlight an element that has an interesting shape, while maintaining that shape. It's best for cases where you've got elements dotted around an interface, and you want to show off their different shapes without making them too big or visually heavy.

What to watch out for

If your element has an unusual shape, this will make it that much harder to align with other elements on the page, since it might not fit neatly into a rectangular grid.

Examples

Example