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 CSS3 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:

1. p#brooklyn-bridge {
2. width: 768px; height: 498px; background-image:
3. -moz-radial-gradient(center, ellipse closest-side, rgba(0,0,0,0),
4. rgba(0,0,0,0.6)), url(brooklyn-bridge.jpg);
5. background-image: -webkit-radial-gradient(center, ellipse closest-side,
6. rgba(0,0,0,0), rgba(0,0,0,0.6)), url(brooklyn-bridge.jpg);
8. background-image: -ms-radial-gradient(center, ellipse closest-side,
9. rgba(0,0,0,0), rgba(0,0,0,0.6)), url(brooklyn-bridge.jpg);
10. background-image: -o-radial-gradient(center, ellipse closest-side,
11. rgba(0,0,0,0), rgba(0,0,0,0.6)), url(brooklyn-bridge.jpg);
12. background-image: radial-gradient(center, ellipse closest-side,
13. rgba(0,0,0,0), rgba(0,0,0,0.6)), url(brooklyn-bridge.jpg);
14. box-shadow: inset 0 0 40px rgba(0, 0, 0, 1); color: rgba(0, 0, 0, 0);
15. overflow: hidden; text-align: center; margin: 0 auto; }

…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).