css - How to create a vignette with background gradients -
is there way create background without use of actual image files has gradient looks this? not wood panel texture, how left , right darker , lighter go inwards. box shadows you can accomplish box-shadow or radial-gradient . let's @ first option: .box { width: 300px; height: 300px; box-shadow: inset 0 0 5em 1em #000; background: url("http://lorempixel.com/300/300"); } this uses inset shadow overlays elements background image. effect resembles example photo: radial gradients you can pretty using several linear gradients, or radial gradient: html { min-height: 100%; background: radial-gradient(transparent, black), url("http://lorempixel.com/500/500"); background-size: cover; } fiddle: http://jsfiddle.net/jonathansampson/t8n5m/ if browser supports gradients , cover , , multiple backgrounds , you'll see this: