While creating this effect is fairly simple to do in Photoshop, it can also be performed solely through CSS and HTML. It is very simple process that gives a pretty cool result. The reason to do this technique is CSS rather than Photoshop is that if you do not like how the effect turned out, instead of going back in to photoshop to redo the entire vignette, the problem can be fixed easily in the CSS code.
The first step is to create a div with the desired image set as the background. The picture I’m using for this post is taken directly from my recovery project, so I know the exact dimension already (900*600). Once the dimensions are set begin coding for the webkit (which helps render CSS elements for browsers) and select “box shadow.” Enter down a line and code the “inset” and set the vertical and horizontal offset (the first two numbers) to 0. After this select a color, most likely #000, which is black. I repeated this process three times because with only one inset, the edges were not quite dark enough. Use the same inset shadow for all three different browsers (webkit, moz, and box-shadow).
I used a 200px shadow in my photo due to its size, but each image is unique and the size of the shadow should be tailored as such.
This is just a simple div class, there is no special HTML coding that is required.