Traditional photographic vignettes – the effect seen when filming a projected image, or in photos taken with old box cameras – have more of a “pincushion” appearance, with shadows becoming more visible at the corners of the image and less at the sides. The previous example in this CSS masks series used an inner box-shadow on a background image, and therefore tended to a rectangular appearance: any circular shadowing effect we achieved was due solely to curving the border of the element with border-radius. But when we keep the corners of the element’s box at right angles, and combine that same technique with a radial gradient:
margin:0; padding: 0;
box-shadow: inset 0 0 80px rgba(0, 0, 0, 1);
…with an photograph by Stephen Cho, we get the effect you see at the top of this article. (Note that I am using the most recent version of the CSS3 radial gradient specification, together with support for multiple backgrounds. You will have to write extra CSS for older browsers).