Using CSS3: box-shadow to create a photo vignette.

The CSS3 property: box-shadow allows you to create simple drop-shadows on block level elements within a webpage. The box below shows this effect in action:

.selector{ box-shadow: x-direction y-direction blur-amount colour; }

The box-shadow property also allows you to place the shadow within the element using the inset value, this allows you to create some pretty cool effects including: photo vignettes.

Take this photo for example:

A pretty photo I am sure you will agree, but let us see what it’s like when we add a vignette!

There we go! Now, how about a slightly different colour?

To create this effect I simply added the following style to a DIV & placed it on top of my image:

  -moz-box-shadow: 0 0 180px #000000 inset;


  -webkit-box-shadow: black 0px 0px 180px inset;

The -moz-box-shadow covers Firefox & the -webkit-box-shadow covers all webkit enabled browsers (Safari, Chrome etc.).

I love the box-shadow property especially the inset value, you really can create some cool depth effects within a web page - all of which would have been previously done using layered divs with shadow images.

Do you have any cool effects created using the box-shadow property? Let others know in the comments below!