Scrim

The word comes from the theatre, where a scrim is a gauze cloth that reads as solid or as almost invisible depending on which side of it the light is on. In interfaces it is a layer whose only job is to take something away from what is behind it, and it turns up in two places. Over a photograph it buys the caption a background dark enough to read against. Behind a dialog it dims the page, which is how a modal dialog says that the layer on top owns the screen until it is dealt with. Material treats it as a colour role in its own right, so the value is stated once for the whole system.

Over imagery the craft is in how the dimming is spent. A flat wash at 40 percent is the cheapest version and it costs the whole picture, since the parts of the image nobody needed darkened get darkened too. A gradient scrim spends the same budget only where the text sits: two or three colour stops running from a heavy dim at the bottom edge to fully transparent well before the top, so the subject of the photograph survives. The variants worth knowing are a blur instead of a dim, a solid plate behind the words alone, and a duotone treatment of the whole image. What none of them changes is how the result must be judged: the contrast ratio is measured against the composited pixels under the glyphs, which is why a scrim that works on one crop can fail on the next.

Behind a dialog the scrim does more than dim. It is usually the click-outside target that dismisses the surface, it blocks the pointer from reaching what it covers, and it is the visual half of the claim that focus has moved forward. The browser offers ::backdrop for anything in the top layer, which is why a <dialog> opened as a modal comes with one for free. Note what it does not do: a scrim is decoration and pointer blocking, never a focus trap, and a keyboard user who can still Tab into the page behind it is looking at a dialog that is only pretending to be modal.

Both lives of the word are the same technique, so both are usually the same token: one dim value, expressed as black at a stated alpha, reused by every surface that needs the layer beneath it to recede. Watch for the naming clash when reading other people’s code. “Overlay” and “backdrop” get used for this layer and also for the panel it sits under, so a component named Overlay is worth opening before assuming which half it is.