Shadow as outline

How to use it

Make an element the same shape as the background colour, and give it a drop shadow.

When to use it

If you want an element or container to stand out, or appear to be closer to the user visually, but don't want to give it a background colour, you can keep the container the same colour as the background and give it a drop shadow instead. This works quite well for white fields on a white background. The drop shadow picks out the outline of the field, but you don't need to give it a harder outline or a different colour, which might not be suitable for fields in your application.

What to watch out for

Generally when I see this use, the drop shadows applied are both big and soft. You might find that using a small, hard drop shadow works fine in your interface.

You might be tempted to use this if you've got a white background, and a white field, to help the field stand out without having too many hard edges. However, if your fields everywhere else are not using this method, users might not be sure what the element is. Try to be consistent in element field styling and avoid using this just because it solves a problem in one part of the interface.

Examples

Example