Bevel and emboss

The whole effect is two colours and an assumption. Light is taken to come from the top left, so the edges facing it get a lighter tone than the face and the edges facing away get a darker one. Put the light pair on the top and left borders and the dark pair on the bottom and right, and the shape reads as raised. Swap them and the same shape reads as pressed in, which is why a classic desktop button needed no artwork to animate: the down state was the up state with its border colours exchanged, and usually the label nudged one pixel down and right to sell the travel. Windows 95 spent four tones on it rather than two, an outer highlight and shadow around an inner pair, which is what gives that generation of controls their slightly chunky edge. Emboss is the same trick applied to type or to a thin rule, so the shape looks stamped into the surface instead of sitting on it.

CSS shipped a shorthand for it in the first version of the language. border-style: outset and inset derive the two tones from the declared border colour, and groove and ridge do the doubled version, which is a fair reminder of what the web was expected to look like in 1996. Almost nobody uses the keywords now, partly because the derived tones are untunable and partly because hand written border colours give the same result with control over both of them. The technique itself never went away: it is what 98.css and every other retro desktop kit is made of.

The bevel is the load bearing detail of skeuomorphism, and it was the first thing flat design threw out. Once the industry decided in the early 2010s that borrowing physical lighting was dishonest, the raised edge went with the gradients and the drop shadows, and for a few years a button was a rectangle of flat colour with nothing at all saying it could be pressed. What came back is not the bevel but its job. Neubrutalism’s hard offset shadow, with no blur and no falloff, is doing exactly what the light and dark border pair did, and admitting that it is a graphic device rather than a lighting model. The neubrutalist press state, where the surface drops onto its own shadow, is the 1995 down state redrawn with a different set of tricks.

Two practical notes if you reach for it. A bevel drawn from fixed light and dark values stops working the moment the surface colour changes, so on a dark canvas the highlights have to be recomputed rather than reused, and a translucent white plus a translucent black travels better than two opaque greys. And depth is not a substitute for contrast: an edge one shade off the face reads as an edge to someone standing at the screen and as nothing at all to a reader with low vision, so whatever the bevel says about pressability still has to be said by the label, the cursor, and the state changes underneath it.