Shadow as contrast helper

How to use it

Give an element a very subtle drop shadow, without much offset.

When to use it

If you have an element - like a card - which has a low contrast with its background, but don't want to change the background colour of the element or the background, one thing you can do is to give it a subtle drop shadow. This helps people's eyes find the edges of the element.

What to watch out for

It's hard to make this effect work and also not make the element look like it's sticking out of the page a little bit. If you're trying to design a completely flat interface you might want to use a different method.

Examples

Example