How can I create a web page background that's mainly black with some gradient shaded circles?

Question

I'm sorry to be asking this question but I really do not know how I can do this. I am not familiar with photoshop and don't even know if that would be the best solution to use.

Here's an example of the kind of background I would like to create:

http://sci.ph/

I know how to do all the HTML but would like some advice on if there are any techiques that I could use to create background shaded gradient circles on a page or should I just hire someone to do this with photoshop.

I am looking for a modern IE10 onwards solution if that helps.

Answer 1

you can make circular gradients entirely with css. For gradients I always use colorzilla gradient generator. Here is an example:

jsfiddle demo

html

<div id="bg"></div>

css

html, body {
            height: 100%;
            margin: 0;
        }

#bg{
min-height: 100%; 

background: -moz-radial-gradient(center, ellipse cover,  #c4d82b 0%, #131313 37%, #131313 68%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#c4d82b), color-stop(37%,#131313), color-stop(68%,#131313)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  #c4d82b 0%,#131313 37%,#131313 68%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  #c4d82b 0%,#131313 37%,#131313 68%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  #c4d82b 0%,#131313 37%,#131313 68%); /* IE10+ */
background: radial-gradient(ellipse at center,  #c4d82b 0%,#131313 37%,#131313 68%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4d82b', endColorstr='#131313',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}

The example you are showing is however very difficult to achieve using css especially if you want a consistent effect across different browsers and devices. An image is probably the best solution.