Question

Here’s what I’m trying to do: A solid grey background with a semi-eclipse (i.e. half an eclipse) of light starting from the centre of the page and ending at the top, so it looks as if there is a torch shining upwards from the centre of the page.

I’ve tried using SVG instead of css as I thought it might be easier, but I’ve ran into a few problems. Can anyone point me in the right direction?

Edit: Here’s an image of what I’m trying to achieve:

Answer 1

You can use a radial-gradient as the background image like this:

html {
    background: #ccc;
    background: -moz-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
    background: -webkit-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
    background: -ms-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
    background: -o-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
    background: radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
    min-height: 100%;
}

This works by placing the center of the gradient 50% above the page (note the -50% second parameter.) combined with the cover size attribute.

You can read more about the CSS radial-gradient property at MDN.

Here is an example: http://jsfiddle.net/kUFNV/4/