Blur unfocused elements

How to use it

Blur elements around the hovered/selected element, so that the element the user has chosen stays sharp while others are out of focus.

When to use it

If you want to make it very clear that the user has highlighted/selected/focused an element, this is one way to do it. This effect is very striking, and makes it obvious which element is the focus.

What to watch out for

Blurring other objects will make them less easy to see, so users might find this frustrating if they can't easily compare one element to another. This also might get in the way if users are accidentally mousing over things and focusing them, so that they keep accidentally blurring elements when they don't want to.

You can also make the focused element increase in size when it is focused, which helps the blurring effect because it's as if the object is getting closer to the user, and the other elements are blurring because of depth of field.

Examples