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: