Here is how to make various gradient backgrounds through CSS. It works on every web browsers (Chrome, Firefox, IE, Safari, Opera, iOS, and Android).
General Gradient – Put this code in your style sheet.
#background {
/* safari4+,chrome */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(255,48,0,1)), color-stop(100%, rgba(255,144,0,1)));
/* safari5.1+,chrome10+ */
background: -webkit-linear-gradient(53deg, rgba(255,48,0,1) 0%, rgba(255,144,0,1) 100%);
/* ff3.6+ */
background: -moz-linear-gradient(53deg, rgba(255,48,0,1) 0%, rgba(255,144,0,1) 100%);
/* opera 11.10+ */
background: -o-linear-gradient(53deg, rgba(255,48,0,1) 0%, rgba(255,144,0,1) 100%);
/* ie10+ */
background: -ms-linear-gradient(53deg, rgba(255,48,0,1) 0%, rgba(255,144,0,1) 100%);
/* w3c */
background: linear-gradient(37deg, rgba(255,48,0,1) 0%, rgba(255,144,0,1) 100%);
/* ie6-9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#ff9000′, endColorstr=’#ff3000′,GradientType=0 );
}
Repeating-Linear-Gradient
#specialbackground {
background:
repeating-linear-gradient(
45deg,
#fff,
#fff 10px,
#eee 10px,
#eee 20px);
}
Radial Gradient
#specialbackground {
background:
radial-gradient(
#ffffff,
#333333);
}