How to create a vignette with background gradients

Question

Is there a way to create a background without the use of any actual image files that has a gradient that looks like this?

Not the wood panel texture, but how the left and right are darker and then get lighter as they go inwards.

Answer 1

Box Shadows

You can accomplish this with box-shadow or radial-gradient. Let's look at the first option:

.box {
    width: 300px; height: 300px;
    box-shadow: inset 0 0 5em 1em #000;
    background: url("http://lorempixel.com/300/300");
}

This uses an inset shadow which overlays the elements background image. The effect resembles your example photo:

Radial Gradients

You can do this pretty easily using several linear gradients, or a 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 your browser supports gradients, cover, and multiple backgrounds, you'll see something like this: