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:

div#brooklyn-bridge {
	margin:0; padding: 0;
	background-image:
	 radial-gradient(ellipse closest-side,
	 rgba(0,0,0,0), rgba(0,0,0,0.6)),
	 url(brooklyn-bridge.jpg);
	box-shadow: inset 0 0 80px rgba(0, 0, 0, 1);
	padding-top: 66%;
	background-size: cover;
}

Photograph by Stephen Cho

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/eNLbQG