Traditionally if you want to have gradient on your web page then it had to be created in Photoshop or something similar. However, did you know that you can produce a gradient by just using CSS?

Well you can. But things are never that easy when trying to make styles work cross browser. There are a couple of useful free online tools that will create the code for you.

http://www.colorzilla.com/gradient-editor/

http://gradients.glrzad.com/

If you would like to learn a little more about how it works then read on.

CSS gradient demo

#demo1{
        background:#37489E; /*For older browsers that don’t support gradients*/
        background: linear-gradient(top, #37489E, #ED1F5C); /* This is the W3C standard*/
	background: -moz-linear-gradient(top, #37489E, #ED1F5C); /* firefox 3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, from(#37489E), to(#ED1F5C)); /*For webkit browsers such as Safari and Chrome*/
	background: -o-linear-gradient(top, #37489E, #ED1F5C);/* Opera 11.10+*/
	background: -ms-linear-gradient(top, #37489E, #ED1F5C);/* IE 10*/
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#37489E', endColorstr='#ED1F5C'); /*IE6 – 9*/
    }

As you can see most of the gradients work in a similar way. With W3C, firefox, opera and IE10 you specify what type of gradient to use, in this case linear-gradient but can also use radial-gradient.

#demo2{
        background:#37489E; /*For older browsers that don’t support gradients*/
        background: radial-gradient(circle, #37489E, #ED1F5C); /* This is the W3C standard*/
	background: -moz-radial-gradient(circle, #37489E, #ED1F5C); /* firefox 3.6+ */
	background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 150, from(#37489E), to(#ED1F5C)); /*For webkit browsers such as Safari and Chrome*/
        /*Opera and IE10 don't currently support  radial gradients*/
    }

Next specify where the gradient should start from. In the case of the demo I used ‘top’ but you can also set a degree.

#demo3{
        background:#37489E; /*For older browsers that don’t support gradients*/
        background: linear-gradient(315deg, #37489E, #ED1F5C); /* This is the W3C standard*/
	background: -moz-linear-gradient(315deg, #37489E, #ED1F5C); /* firefox 3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, from(#37489E), to(#ED1F5C)); /*For webkit browsers such as Safari and Chrome*/
	background: -o-linear-gradient(315deg, #37489E, #ED1F5C);/* Opera 11.10+*/
	background: -ms-linear-gradient(315deg, #37489E, #ED1F5C);/* IE 10*/
    }

Then just add the ‘start’ and ‘end’ colours. If you really want to hurt people’s eyes then you can add multiple colours.

#demo4{
        background:#37489E; /*For older browsers that don’t support gradients*/
        background: linear-gradient(top, #37489e 0%,#ed1f5c 25%,#237fff 50%,#ffff23 75%,#ed1f5c 100%); /* This is the W3C standard*/
        background: -moz-linear-gradient(top, #37489e 0%, #ed1f5c 25%, #237fff 50%, #ffff23 75%, #ed1f5c 100%); /* firefox 3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#37489e), color-stop(25%,#ed1f5c), color-stop(50%,#237fff), color-stop(75%,#ffff23), color-stop(100%,#ed1f5c)); /*For webkit browsers such as Safari and Chrome*/
        background: -o-linear-gradient(top, #37489e 0%,#ed1f5c 25%,#237fff 50%,#ffff23 75%,#ed1f5c 100%);/* Opera 11.10+*/
        background: -ms-linear-gradient(top, #37489e 0%,#ed1f5c 25%,#237fff 50%,#ffff23 75%,#ed1f5c 100%);/* IE 10*/
    }

With Internet Explorer 6 through to 9 you don’t have much of a choice, but at least you can get some form of gradient. For more information about the gradient filter check out msdn.microsoft.com. If you do try anything fancy do make sure you set a plain background colour in the first line of you code just I case a browser can’t support what you are doing.