CSS3 Gradient Background

Linear Gradient 

Top → Bottom:

1. /* fallback */
2. background-color: #1a82f7;
3. background-repeat: repeat-x;
4.  
5. /* Safari 4-5, Chrome 1-9 */
6. background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
7.  
8. /* Safari 5.1, Chrome 10+ */
9. background: -webkit-linear-gradient(top, #2F2727, #1a82f7);
10.  
11. /* Firefox 3.6+ */
12. background: -moz-linear-gradient(top, #2F2727, #1a82f7);
13.  
14. /* IE 10 */
15. background: -ms-linear-gradient(top, #2F2727, #1a82f7);
17. /* Opera 11.10+ */
18. background: -o-linear-gradient(top, #2F2727, #1a82f7);

Here is the result:

Left → Right

1. /* fallback */
2. background-color: #1a82f7;
3. background-repeat: repeat-y;
5. /* Safari 4-5, Chrome 1-9 */
6. background: -webkit-gradient(linear, left top, right top, from(#1a82f7), to(#2F2727));
8. /* Safari 5.1, Chrome 10+ */
9. background: -webkit-linear-gradient(left, #2F2727, #1a82f7);
10.  
11. /* Firefox 3.6+ */
12. background: -moz-linear-gradient(left, #2F2727, #1a82f7);
13.  
14. /* IE 10 */
15. background: -ms-linear-gradient(left, #2F2727, #1a82f7);
16.  
17. /* Opera 11.10+ */
18. background: -o-linear-gradient(left, #2F2727, #1a82f7);

Here is the result:

With Even Stops:

1. /* fallback DIY*/
2.  
3. /* Safari 4-5, Chrome 1-9 */
4. background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.25, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.75, #1a82f7), to(#2F2727));
5.  
6. /* Safari 5.1+, Chrome 10+ */
7. background: -webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
8.  
9. /* Firefox 3.6+ */
10. background: -moz-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
11.  
12. /* IE 10 */
13. background: -ms-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
14.  
15. /* Opera 11.10+ */
16. background: -o-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);

With Specified Arbitrary Stops

1. /* Safari 4-5, Chrome 1-9 */
2. background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.95, #1a82f7), to(#2F2727));
3.  
4. /* Safari 5.1+, Chrome 10+ */
5. background: -webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
6.  
7. /* Firefox 3.6+ */
8. background: -moz-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
9.  
10. /* IE 10 */
11. background: -ms-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
12.  
13. /* Opera 11.10+ */
14. background: -o-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

Radial Gradient 

Centered and Full Size

1. /* fallback */
2. background-color: #2F2727;
3. background-position: center center;
4. background-repeat: no-repeat;
5.  
6. /* Safari 4-5, Chrome 1-9 */  
7. background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727));
8.  
9. /* Safari 5.1+, Chrome 10+ */
10. background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);
12. /* Firefox 3.6+ */
13. background: -moz-radial-gradient(circle, #1a82f7, #2F2727);
14.  
15. /* IE 10 */
16. background: -ms-radial-gradient(circle, #1a82f7, #2F2727);
17.  
18. /* Opera cannot do radial gradients yet */

Positioned and Sized
Note: Not Consistent Among Browsers

1. /* fallback */
2. background-color: #2F2727;
3. background-position: 80% 20%;
4. background-repeat: no-repeat;
5.  
6. /* Safari 4-5, Chrome 1-9 */
7. background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#1a82f7), to(#2F2727));
8.  
9. /* Safari 5.1+, Chrome 10+ */
10. background: -webkit-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);
11.  
12. /* Firefox 3.6+ */
13. background: -moz-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);
14.  
15. /* IE 10 */
16. background: -ms-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);
17.  
18. /* Opera cannot do radial gradients yet */

Shape keywords: circle, ellipse Size keywords: closest-side, closest-corner, farthest-side, farthest-corner, contain, cover