how to create a Gradient using html5/css3

css3  gradient ,html5

Gradient using html5/css3

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

Gradient with Glossy effect

background: #e4f5fc; /* Old browsers */
background: -moz-linear-gradient(top,  #e4f5fc 0%, #bfe8f9 51%, #9fd8ef 54%, #2ab0ed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f5fc), color-stop(51%,#bfe8f9), color-stop(54%,#9fd8ef), color-stop(100%,#2ab0ed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #e4f5fc 0%,#bfe8f9 51%,#9fd8ef 54%,#2ab0ed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #e4f5fc 0%,#bfe8f9 51%,#9fd8ef 54%,#2ab0ed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #e4f5fc 0%,#bfe8f9 51%,#9fd8ef 54%,#2ab0ed 100%); /* IE10+ */
background: linear-gradient(top,  #e4f5fc 0%,#bfe8f9 51%,#9fd8ef 54%,#2ab0ed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#2ab0ed',GradientType=0 ); /* IE6-9 */

Gradient with Multiple Color

background: #f3c5bd; /* Old browsers */
background: -moz-linear-gradient(top,  #f3c5bd 0%, #e86c57 50%, #ea2803 51%, #f45500 76%, #c72200 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3c5bd), color-stop(50%,#e86c57), color-stop(51%,#ea2803), color-stop(76%,#f45500), color-stop(100%,#c72200)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#f45500 76%,#c72200 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#f45500 76%,#c72200 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#f45500 76%,#c72200 100%); /* IE10+ */
background: linear-gradient(top,  #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#f45500 76%,#c72200 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3c5bd', endColorstr='#c72200',GradientType=0 ); /* IE6-9 */

Your Ad Here

Horizontal Gradient Effect

background: #c5deea; /* Old browsers */
background: -moz-linear-gradient(left,  #c5deea 0%, #8abbd7 31%, #066dab 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #c5deea 0%,#8abbd7 31%,#066dab 100%); /* IE10+ */
background: linear-gradient(left,  #c5deea 0%,#8abbd7 31%,#066dab 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=1 ); /* IE6-9 */

Vertical Gradient Effect

background: #ff3019; /* Old browsers */
background: -moz-linear-gradient(top,  #ff3019 0%, #cf0404 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ff3019 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ff3019 0%,#cf0404 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ff3019 0%,#cf0404 100%); /* IE10+ */
background: linear-gradient(top,  #ff3019 0%,#cf0404 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */

Radial Gradient Effect 

background: #b2e1ff; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #b2e1ff 0%, #66b6fc 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#b2e1ff), color-stop(100%,#66b6fc)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  #b2e1ff 0%,#66b6fc 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  #b2e1ff 0%,#66b6fc 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  #b2e1ff 0%,#66b6fc 100%); /* IE10+ */
background: radial-gradient(center, ellipse cover,  #b2e1ff 0%,#66b6fc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2e1ff', endColorstr='#66b6fc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

DOWNLOAD SAMPLE 

keywords;Gradient for chrome ,mozilla ,explorer,safari,webkit