Inner shadow as field signifier/inset face

How to use it

Apply an inner shadow to an element, offset downwards, assuming a top-down light source.

When to use it

If you want an element like a text field to appear to be inset into the page, an inner shadow is a good way to do it. This is because the top edge overhangs the element, casting a shadow on its face.

This is most often used for fields that can be filled in, since there's a strong connection between something that looks like it can literally hold something, and filling out a form field.

What to watch out for

The shadow doesn't need to be very strong to give the right effect. Try to keep it subtle, unless you have a reason not to.

Examples