Box Shadow

The syntax of box-shadow is "x offset, y offset, blur radius, color." For example, 0 4px 12px rgba(0,0,0,0.1) means shifted down 4px, blurred 12px, in black at 10% opacity. Good-looking shadows usually shift downward, have a large blur, and use a very light color.

Shadows express height: the higher an element floats, the bigger its shadow. A common layering: cards get a very light small shadow that deepens on hover; dropdown menus and popovers get a medium shadow; dialogs and drawers get the largest shadow. Material Design calls this layering Elevation.

A common beginner problem is shadows that are too dark and harsh, like 0 0 10px black, which looks cheap. On light gray backgrounds you can use a thin border instead of a shadow. In dark mode, shadows are nearly invisible, so you usually use lighter background colors to separate layers instead.