Shadow as focus state

How to use it

Apply a drop shadow that has no offset, and set it to your focus state colour. Set the blur and distance of the shadow to be high enough that the shadow is visible on all sides of the element.

When to use it

This is one way to highlight an element that has been focused, like with a keyboard.

What to watch out for

In the example below the shadow is set to blue, because that's the colour I see used most often for focus states. Using your own brand colours here might not be a good idea if people are used to seeing specific colours for focus states. Make sure the colour has enough contrast with all other colours around it, since the focus state won't be obvious enough otherwise.

Examples

Example