Vignette

Vignetting started as a defect. A lens passes less light to the corners of the frame than to the middle, for four separate reasons that photographers name separately: the hood or filter ring physically clipping the cone of light, the falloff that geometry alone produces, the aperture blades shading the oblique rays, and, on a digital sensor, photosites that answer light arriving at a steep angle less willingly. Printers then spent decades adding the same darkening back on purpose, burning in the edges under the enlarger to stop the eye wandering off the paper. Interfaces inherited the deliberate version. One absolutely positioned layer, a radial gradient of black at a low alpha, pointer-events: none and aria-hidden, laid over a photograph or a video poster so the middle of the picture keeps the attention.

The word gets used for a second layer that is not the same thing, and the distinction is worth holding. A scrim is functional: it exists so text on top clears its contrast ratio, so it is usually one sided, heaviest at the edge the words sit against, and it is judged by measuring the composited pixels under the glyphs. A vignette is compositional: radially symmetric, spending the same ink on all four corners whether or not anything is written there, and judged by where the eye lands. A hero often carries both layers at once, and the whole stack gets called a vignette in conversation, which is fine until someone tries to fix a failing contrast check by deepening the corners.

The tuning is mostly restraint. Match the gradient’s shape to the frame rather than using a circle, since a circular falloff on a wide image darkens the left and right edges long before the top and bottom. Keep the centre fully transparent across a generous radius and give the ramp a long soft tail, because a visible boundary reads as a smudged lens or a bad crop rather than as mood. Prefer a black overlay at a stated alpha over a filter, so the value is one token instead of a per-image guess, and remember it is subtractive: anything already near the edge, a caption, a play button, a control in the corner, loses real contrast to it. On small cards a vignette is easy to misread as an inset shadow or a rendering bug, and on a whole page it dims content the reader actually needs, which is why it belongs on imagery and almost never on layout.

Two naming traps. Outside design, a vignette is a short self contained scene in writing or a small decorative illustration, so a component named Vignette in an unfamiliar codebase is worth opening before assuming it darkens anything. Inside design, the corner darkening is one ingredient in larger costumes rather than a look of its own: it turns up in retro film alongside grain and halation, under scanlines as part of the tube, and beside a duotone treatment where the two together do the job a photograph on its own would not.