Inner shadow

An inner shadow falls inside an element instead of outside it. In the example, the raised square sits above the surface, while the inset square looks pressed into it.

That sunken look is useful for pressed buttons, toggles, text fields and progress tracks. In CSS, you create it with the inset keyword in box-shadow.

Keep inner shadows subtle. Strong ones can make an element look broken or disabled rather than pressed.