Sunny Books
What we have

CSS3 Gradient Background

Gradient backgrounds in CSS3 are treated as a background image. It can be created using the background or background-image properties just like a regular background image. The value for these properties vary a little depending on the types of gradient: linear or radial.

Linear Gradient (Top to Bottom)

div[linearTopBtm] {
background: #93cc2d; /* Old browsers */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#93cc2d), to(#2d5f12)); /* Safari 4-5, Chrome 1-9 */
background: -webkit-linear-gradient(top, #93cc2d, #2d5f12); /* Safari 5.1, Chrome 10+ */
background: -moz-linear-gradient(top, #93cc2d, #2d5f12); /* Firefox 3.6+ */
background: -ms-linear-gradient(top, #93cc2d, #2d5f12); /* IE 10 */
background: -o-linear-gradient(top, #93cc2d, #2d5f12); /* Opera 11.10+ */
}

Linear Gradient (Left to Right)

div[linearLeftRight] {
background: #93cc2d; /* Old browsers */
background: -webkit-gradient(linear, left top, right top, from(#93cc2d), to(#2d5f12)); /* Safari 4-5, Chrome 1-9 */
background: -webkit-linear-gradient(left, #93cc2d, #2d5f12); /* Safari 5.1, Chrome 10+ */
background: -moz-linear-gradient(left, #93cc2d, #2d5f12); /* Firefox 3.6+ */
background: -ms-linear-gradient(left, #93cc2d, #2d5f12); /* IE 10 */
background: -o-linear-gradient(left, #93cc2d, #2d5f12); /* Opera 11.10+ */
}

Linear Gradient Diagonal (top left to right bottom)

div[linearDiagonal] {
background: #93cc2d; /* Old browsers */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#93cc2d), color-stop(100%,#2d5f12)); /* Safari 4-5, Chrome 1-9 */
background: -webkit-linear-gradient(-45deg, #93cc2d 0%,#2d5f12 100%); /* Safari 5.1, Chrome 10+ */
background: -moz-linear-gradient(-45deg, #93cc2d 0%, #2d5f12 100%); /* Firefox 3.6+ */
background: -ms-linear-gradient(-45deg, #93cc2d 0%,#2d5f12 100%); /* IE 10 */
background: -o-linear-gradient(-45deg, #93cc2d 0%,#2d5f12 100%); /* Opera 11.10+ */
}

Linear Gradient (with Even Stops)

div[linearEvenStops] {
background: #93cc2d; /* Old browsers */
background: -webkit-gradient(linear, left top, right top, from(#93cc2d), color-stop(0.25, #2d5f12), color-stop(0.5, #93cc2d), color-stop(0.75, #2d5f12), to(#93cc2d)); /* Safari 4-5, Chrome 1-9 */
background: -webkit-linear-gradient(left, #93cc2d, #2d5f12, #93cc2d, #2d5f12, #93cc2d); /* Safari 5.1+, Chrome 10+ */
background: -moz-linear-gradient(left, #93cc2d, #2d5f12, #93cc2d, #2d5f12, #93cc2d); /* Firefox 3.6+ */
background: -ms-linear-gradient(left, #93cc2d, #2d5f12, #93cc2d, #2d5f12, #93cc2d); /* IE 10 */
background: -o-linear-gradient(left, #93cc2d, #2d5f12, #93cc2d, #2d5f12, #93cc2d); /* Opera 11.10+ */
}

Linear Gradient (with Specified Arbitrary Stops)

div[linearArbStops] {
background: #93cc2d; /* Old browsers */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fc5b46), color-stop(18%,#f9f45e), color-stop(35%,#81f75d), color-stop(54%,#1df4e2), color-stop(76%,#1da2f4), color-stop(100%,#d00ef7)); /* Safari 4-5, Chrome 1-9 */
background: -webkit-linear-gradient(left, #fc5b46 0%,#f9f45e 18%,#81f75d 35%,#1df4e2 54%,#1da2f4 76%,#d00ef7 100%); /* Safari 5.1+, Chrome 10+ */
background: -moz-linear-gradient(left, #fc5b46 0%, #f9f45e 18%, #81f75d 35%, #1df4e2 54%, #1da2f4 76%, #d00ef7 100%); /* Firefox 3.6+ */
background: -ms-linear-gradient(left, #fc5b46 0%,#f9f45e 18%,#81f75d 35%,#1df4e2 54%,#1da2f4 76%,#d00ef7 100%); /* IE 10 */
background: -o-linear-gradient(left, #fc5b46 0%,#f9f45e 18%,#81f75d 35%,#1df4e2 54%,#1da2f4 76%,#d00ef7 100%); /* Opera 11.10+ */
}

Radial Gradient (Centered, Full Size)

div[radialCentered] {
background: #93cc2d; /* Old browsers */
background: transparent url(images/radial_bg.png) center center no-repeat; /* fallback */
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#2d5f12), to(#93cc2d)); /* Safari 4-5, Chrome 1-9 */
background: -webkit-radial-gradient(circle, #2d5f12, #93cc2d); /* Safari 5.1+, Chrome 10+ */
background: -moz-radial-gradient(circle, #2d5f12, #93cc2d); /* Firefox 3.6+ */
background: -ms-radial-gradient(circle, #2d5f12, #93cc2d); /* IE 10 */
/* Opera cannot do radial gradients yet */
}

Radial Gradient (Positioned, Sized)

Warning: Not Consistent Among Browsers
div[radialPositioned] {
background: #93cc2d; /* Old browsers */
background: transparent url(images/radial_fancy.png) 80% 20% no-repeat; /* fallback */
background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#2d5f12), to(#93cc2d)); /* Safari 4-5, Chrome 1-9 */
background: -webkit-radial-gradient(80% 20%, closest-corner, #2d5f12, #93cc2d); /* Safari 5.1+, Chrome 10+ */
background: -moz-radial-gradient(80% 20%, closest-corner, #2d5f12, #93cc2d); /* Firefox 3.6+ */
background: -ms-radial-gradient(80% 20%, closest-corner, #2d5f12, #93cc2d); /* IE 10 */
/* Opera cannot do radial gradients yet */
}

SUNWEB EXPERT