Chuyển sắc gradient với CSS

code: Linear Gradient
1 background:#006070;
2 background: linear-gradient(top, #648080 0%, #006070 100%);
3 background:-o-linear-gradient(top, #648080, #006070);
4 background:-moz-linear-gradient(top, #648080, #006070);
5 background:-webkit-gradient(linear, left top, left bottom, from(#648080), to(#006070), color-stop("% vị trí ","màu"));
6 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr ='#648080', endColorstr ='#006070');
7 background: -ms-linear-gradient(top, #648080, #006070);
Mô tả
Dòng 1: là mầu nền thuần bạn sẽ để đầu tiên trong trường hợp trình duyệt người dùng không hỗ trợ gradient thì chí ít nó cũng có được màu nền theo ý bạn
Dòng 2: dành cho trình duyệt nào không có vendor prefix theo chuẩn code của W3C
Dòng 3: được sử dụng cho trình duyệt opera từ phiên bản 11 trở lên, -o-linear-gradient có 3 tham số với tham số đầu tiên là hướng chuyển sắc bạn có thể thay bằng "bottom", "left", hoặc "right", hai tham số còn lại là mã mầu bắt đầu và màu kết thúc, bạn cũng có thể thêm các tham số màu và cả tỉ lệ phần trăm vị trí nữa cho thêm sặc sỡ, mã mầu bạn cũng có thể dùng chế độ màu rgab trong CSS3
Dòng 4: sử dụng cho trình duyệt firefox từ phiên bản 3.6, các tham số tương tự như trên
Dòng 5: sử dụng cho trình duyệt Chrome và Safari. Tham số đầu tiên linear là kiểu chuyến sắc, tham số thứ 2 ngĩa là mầu đầu tiên được chuyển từ bên trái và phía trên, tham số thứ hai nghĩa là mầu kết thúc được chuyển từ bên trái và phía dưới, bạn có thể thay "left" bằng "right" một trong hai tham số 2 và 3 để có được chuyển sắc theo một góc 45 độ, tham số thứ 4 và thứ 5 là mã mầu bắt đầu và kết thúc, để thêm màu vào các khoảng ở giữa chuyển sắc bạn dùng thêm các tham số color-stop("% vị trí ","màu")
Dòng 6: sử dụng cho trình duyệt Internet Explorer của Microsoft nó có thể làm việc trên cả phiên bản IE6 thậm chí cả IE5 tuy nhiên lại không làm việc trên IE9, trong bài viết sau tôi sẽ giới thiệu giải pháp gradient cho IE9
Dòng 7: sử dụng cho IE10 của Microsoft
Nguồn: sothichweb.com
Để biết thêm về các giá trị vị-trí có những vị trí cụ thể nào vào trang thuthuatweb tìm hiểu thêm.

Gradient bao gồm các kiểu:
Linear Gradient : dạng đường thẳng.
Ridial Gradient: dạng tròn.
Angle Gradient: dạng góc.
Reflected Gradient: dạng phản chiếu.
Diamond Gradient: dạng kim cương.

tham khảo:http://bcdonline.net/hieu-ung-chuyen-sac-gradient-backgrounds-css3/https://css-tricks.com/examples/CSS3Gradient/

Radial Gradient
#radial-position {
/* fallback */
background-color: #2F2727;
background-image: url(images/radial_fancy.png);
background-position: 80% 20%;
background-repeat: no-repeat;

/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#1a82f7), to(#2F2727));

/* Safari 5.1+, Chrome 10+ */
background: -webkit-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);

/* Firefox 3.6+ */
background: -moz-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);

/* IE 10 */
background: -ms-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);

/* Opera cannot do radial gradients yet */
}

background: -webkit-gradient(radial, tọa độ(X1 Y1)-vị trí, độ lan rộng-kích thước x1y1 ,tọa độ( X2 Y2)-vị trí, độ lan rộng-kích thước x2y2, from(#màu bắt đầu -x1y1), to(#màu kết thúc x2y2));
 background:-webkit-gradient(linear, tọa độ(X1 Y1)-vị trí, tọa độ( X2 Y2)-vị trí, from(#maù bắt đầu), to(#màu kết thúc), color-stop("% vị trí ","màu"));

Các tham số quan trong:
- vị trí (tọa độ) 
- kích thước - kiểu - độ lan rộng
- mã màu (rgba, #,..)
- độ tràn màu - độ lẫn