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 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;
	 radial-gradient(ellipse closest-side,
	 rgba(0,0,0,0), rgba(0,0,0,0.6)),
	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 to learn more.
Check out the CodePen demo for this article at