After reading Chris Coyier's A Journey with Vignetting post and Trent Walton's CSS Box-Shadow:Inset post, I wanted to see what I could come up with. I'm pretty pleased with the outcome and wanted to share it with you.
I ended up with a few different approaches. I like the look of the Overlay vignette & Inset Shadow Method the best, but it requires a lot more out of the browser to render the heavy inset shadow.
The last approach I tried uses -webkit-mask-box-image on the image along with a black background color on the parent element. This is the cleanest method I could come up with, but it only works in Webkit. It appears a similar approach is possible in Firefox 3.5+ using a SVG + CSS combo, but I need to look into it a bit further.
While creating these versions I came across a rather large issue with how Mozilla & Webkit differ in sizing radial gradients. It appears that radial gradients in Mozilla will scale to the dimensions of it's containing element while webkit gradients are a fixed size. This means in webkit you should always know the size of your image. Using -webkit-background-size didn't help either. :( I hope this is just a bug and not how it's intended to function.
Check out the source of this page to see how I put it together. Feel free to share this and use it on your projects however you like.
To see more of my expirements like this follow me on twitter and keep up on my blog.
You can also email me at jordandobson@gmail.com.