CSS3 gradients cung cấp khả năng chuyển giữa hai hay nhiều màu. CSS3 định nghĩa hai kiểu gradients là:

  • Linear gradients: chuyển màu theo các hướng trên, dưới, trái, phải, chéo
  • Radial gradients: chuyển màu từ trung tâm

Các thuộc tính dùng gradients cung cấp bởi CSS3 gồm: linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient.

Các trình duyệt hỗ trợ:

  Chrome IE/Edge Firefox Safari Opera
linear-gradient 26.0 +
10.0 -webkit-		 10.0 + 16.0 +
3.6 -moz-		 6.1 +
5.1 -webkit-		 12.1 +
11.1 -o-
radial-gradient 26.0 +
10.0 -webkit-		 10.0 + 16.0 +
3.6 -moz-		 6.1 +
5.1 -webkit-		 12.1 +
11.6 -o-
repeating-linear-gradient 26.0 +
10.0 -webkit-		 10.0 + 16.0 +
3.6 -moz-		 6.1 +
5.1 -webkit-		 12.1 +
11.1 -o-
repeating-radial-gradient 26.0 +
10.0 -webkit-		 10.0 + 16.0 +
3.6 -moz-		 6.1 +
5.1 -webkit-		 12.1 +
11.6 -o-

Các trình duyệt Chrome, Firefox, Safari, Opera có sử dụng tiền tố (prefix) như –webkit-, –moz-, –o-. Các số đứng trước các tiền tố là phiên bản bắt đầu của trình duyệt có sử dụng tiền tố, ví dụ trong Chrome và thuộc tính linear-gradient có 10.0-webkit- nghĩa là kể từ phiên bản Chrome 10.0 sử dụng  -webkit-linear-gradient.

(Tham khảo thêm gradients tại https://www.w3schools.com/css/css3_gradients.asp )

Học HTML & CSS >