CSS Vignette Effect
Vignetting is an old photographic effect where an image gently fades out toward its edges. Vignetting began as the unintentional result of the limitations of camera equipment, but photographers, artists, and designers have also employed vignettes as a stylistic effect to create stronger focus for the viewer, drawing the eye to the center of an image. Vignettes help to add a sense of dimension to a photo, as shown in the images below:
Here is a photo of the Palacio Nacional in the Dominican Republic. Note that without vignetting the building, sky, and stairway to the entrance all appear to share similar emphasis.
Now compare this photo, vignetted using Photoshop, with the previous one. Note that the darker edges subdue the sky and the wings of the building, giving the entrance and dome greater prominence.
Vignette Effect with Box Shadow
Ever since the advent of CSS3, which stands for "Cascading Style Sheets level 3", web designers have had the capacity to apply vignettes to an image or page element as a style without having to rely exclusively on photo editing software.
The inset variant of the box-shadow style can achieve a vignette effect quite easily and with just a little bit of manipulation of some z-index values and div wrappers, can be dynamically inserted as an image overlay.
To create a vignette-like shadowing effect, we can apply a box-shadow style like this:
box-shadow: inset 0px 0px 18px rgba(0,0,0,.5);
As with most CSS, there are different ways of going about the vignette effect. The method I recommend is to wrap your image in a parent tag like a div with a class of "vignette" and let the parent's class do the work of setting up the children tags.
It is important to remember that the box shadow style that achieves a vignette effect is a background style. Because of this, the vignette style cannot simply be applied to a parent container wrapped around the target image: any nontransparent image file will simply cover the vignette. Instead, we must rely on a sibling tag to hold the style.
To keep the sibling div and img tags working together, I use a vignette class applied to a parent container to set the styles of the children. My CSS will therefor need styles for the following: .vignette, .vignette > div, and .vignette > img.
By absolutely positioning a <div class="vignette-frame"></div> tag to which the vignette style is to be applied and giving this div a higher z index than its sibling image, the vignette will sit above the image and our effect will be achieved. All we need to do is make sure that the vignetted div is set to 100% of its parent height and we're ready to code the HTML with our vignette class applied. Here is our CSS:
.vignette-wrapper {
position: relative;
width: 250px; /* Set this to the width of the image */}
.vignette-wrapper > .vignette {
background: transparent;
box-shadow: inset 0px 0px 46px rgba(0,0,0,.7);
position: absolute;
inset: 0;
height: 100%;
width: 100%;
z-index: 1;
}
.vignette-wrapper > img {
position: relative;
width: 100%;
z-index: -1;}
The resulting HTML code looks like this:
<div class="vignette-wrapper">
<div class="vignette"></div>
<img src="/img/my-image.png" alt="My image with a CSS vignette effect"></div>
Below is a sample of our styled effect in action. What's great is that the CSS version looks almost identical to our software-edited rendition above.
Our image without the vignette class.
The same image with our CSS vignette applied.
