Semi-transparent outline as element contrast helper

How to use it

Add a thick border around, or background shape behind, an element, colour it black or some other dark colour, and make it semi-transparent.

When to use it

If you have an element such as a card or pop-up modal that you want to highlight, a semi-transparent black outline or shape behind the element can provide it with more edge contrast against a background, but without being very distracting, like a solid colour outline might be. You can also do this using a stroke along the edge of an element, like a slide-up card in a mobile design, as in the second example below.

This is especially useful if your foreground element does not contrast very well with the background, but you don't want to dim the whole background like you might see with a lightbox effect. You might not want to dim the background if the background has content that the user will want to read at the same time they're interacting with the foreground element, like in the case of slide-up designs.

What to watch out for

If your background is likely to be dark, your semi-transparent outline will need to be less transparent than if your background is a lighter colour.

You can use this same technique with a semi-transparent white border, instead of black, if that works better with your background and foreground colours.

Examples

Example

Example