Vignetting in photography is the practice of making the corners darker or lighter to highlight what is in the center of the photograph. It's possible to reproduce this effect in your website using a single CSS3 property: radial-gradient.

Here's the CSS for this project:

  body {
  margin: 0;
}

#photo {
  background: radial-gradient(circle, transparent, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9)), url(https://unsplash.it/2000?image=1070);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
}

Here's the finished project:

The thing we need to do to make this happen is to use the background property in CSS on our div. Our div has an id of #photo so that's what we're hooking into to style the background.

First, let's set up our background image. I'm using a nifty service from Unsplash that allows you to use Unsplash photography right in your demo without having to download the image. Learn more at unsplash.it. Here's the background property with the image in it:

  #photo {
  background: url(https://unsplash.it/2000?image=1070);
}

If you want this image to be full-bleed (taking up the full height and width of the viewport with no margin) then you'll need to add some other properties to the div:

  #photo {
  background: radial-gradient(circle, transparent, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9)), url(https://unsplash.it/2000?image=1070);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
}

You can play around with the background-position values to get the part of the photo in the viewport that you want to highlight. This photo has a really nice centered element so I'm just using center. That centers the background photo horizontally and vertically.

Now that we have the photo in place let's take a look at the vignette. This effect is achieved through adding a value to the background property. When you need to layer the background property with multiple values, remember that the first value will be the topmost layer. So whatever is first in the list will go on top. We want our gradient on top of our background image so it goes first in the declaration.

You may not be familiar with the radial-gradient property. It can be used on any element that supports an image. An easy use is just to add it as a value to the background property (like we're using in this tutorial). Here is what the radial-gradient property looks like:

background: radial-gradient([shape of gradient], [color stop], [color stop]);

For our purposes, we're going to use three stops, but two is all you really need to create a color transition. You can try our experiment with just two and see why I chose to widen out the gradient.

So when we add the radial-gradient value to the background property, this is what we come out with:

  background: radial-gradient(circle, transparent, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9)), url(https://unsplash.it/2000?image=1070);

Let me go over our values for radial-gradient. Circle is the shape that we want. You could also try it out using elipse to see if that shape is better for your image. Then we declare three color values. In the pen you can see that I used an actual color for the first transparent value but the SASS compiler has changed it to simply say transparent. I used this value: rgba(0, 0, 0, 0). So the first value in the radial-gradient property is the center point. Obviously, we want to see the center of the image so that's why it gets a transparent color. The second value (or stop) is a little darker and the third value is darker still. That's the very outer edge of the image. You can play with those transparencies to get the type of vignetting you want. The terms we use are "light" and "heavy" when it comes to the darkness of vignetting on the photo.

So that's it. Play around with different colors and transparencies. Tip: if you change the second stop to red it has a nice effect.

Here's the finished pen again:


3,712 0 54