How to create a vignette effect with CSS ~ Designer's World

Vignette Effect

Miami Webz

What the heck is a vignette effect?

There are a few definitions for what exactly a vignette is. In this example, I will define what a vignette is based on the results of the code example.

In this example our vignette effect will take an image and add a shadow to the inside of it around all four corners. This vignette effect is commonly used by photographers for portraits and wedding pics. Use it as you please.

How to use CSS to apply the vignette effect without using photo shop or a hood lens.

Wrap a <div> around an <img> tag and make sure to add a class to your <div class="vignette"> Your html code should look something like this:

<div class="vignette">
        <img src="love.jpg" alt="people kissing">
</div>

Now add a little CSS in the html or in a separate file like this:

.vignette {
        -webkit-box-shadow: inset 0px 0px 85px rgba(0,0,0,0.4);
        -moz-box-shadow:    inset 0px 0px 85px rgba(0,0,0,0.4);
        box-shadow:         inset 0px 0px 85px rgba(0,0,0,0.4);

        line-height: 0;         /* ensure no space between bottom */

        display: inline-block;  /* don't go wider than image */
}
.vignette img {
        position: relative;
        z-index: -1;            /* position beneath */
}

Now you have the code to create a vignette effect without using a special camera lens or applying the effect in photo shop.

Designer's World