Hover shadow

How to use it

Place a very blurred shadow below an element so that it appears as if the element is hovering in mid air, with a light source directly above the element.

When to use it

This is mainly a stylistic choice. It's a different approach to shadows that will stand out to users since it's not as common as a drop shadow.

What to watch out for

This style of shadow might not mix well with other styles of shadow, since it assumes that the light source is above the element. If other elements are using drop shadows, that assumes that there is also a light source coming from an angle.

The shadow needs to be farther away from the element than a drop shadow would be, so this technique will take up more space. It might work well for pages with lots of white space, or for a large title section, but be careful if you've got a busy page.

If you're using this technique against a dark background, the user might not be able to see it very easily, especially since it's not directly attached to the element it's being cast from.

Make the shadow smaller than the shape itself, to simulate light from other angles lightening up the edges of the shadow.

Examples

Example