Vignetting effect with CSS3 radial gradient
Original image :
With background image :
radial-gradient(center, transparent 30%, #000),
url(img.jpg)
Other effect :
radial-gradient(center, transparent 80%, #000 81%),
url(img.jpg)
Other other effect :
radial-gradient(center, transparent 80%, #fff 81%),
url(img.jpg)
Using css3 radial-gradients and multiple background. OK on Firefox 3.6, Chrome 10 (Windows only ?), Opera 11.11 (Windows only ?).
Does not work on IE6/IE9 nor Safari.
Author : Raphael Goetter