Cú pháp chung

Radial-gradient ([<position> || <angle>], [<shape> || <size>], <color-stop>, <color-stop>, <color-stop>);

Ở bài trước các bạn đã biết <position> và <angle> dùng để xác định Gradient-Line. Trong Radial Gradient cũng có xác định Gradient-Line và điểm đầu chính là tâm của hiệu ứng Gradient xảy ra, các bạn áp dụng tương tự như Linear Gradient. Ngoài ra, Radial Gradient còn có một thuộc tính là Gradient-Shape dùng để biểu diễn hình dạng của gradient và 2 giá trị của <shape> và <size> dùng để xác định nó.

• <shape> bao gồm các giá trị circle (tròn), ellipse (hình elip), mặc định là ellipse.

• <size> dùng để xác định bán kính của hình dạng gradient, bao gồm các giá trị closest-side, closest-corner, farthest-side, farthest-corner, contain và cover (mặc định).

closest-side: Bán kính được tính bằng khoảng cách từ điểm đầu đến lề bên gần nhất của đối tượng. Chẳng hạn,  bạn có một box kích thước 100px chiều dài và 200px chiều cao, điểm đầu nằm ở vị trí 10% 10% (cách bên trái 10px, bên trên 20px) bên trong hộp thì bán kính được tính bằng 10px. Cũng như trên nhưng <shape> là ellipse thì bán kính chiều ngang sẽ là 10px và bán kính chiều dọc sẽ là 20px.

closest-corner: Bán kính được tính bằng khoảng cách từ điểm đầu đến góc gần nhất.

farthest-side: Bán kính được tính bằng khoảng cách từ điểm đầu đến lề bên xa nhất của đối tượng.

farthest-corner: Bán kính được tính bằng khoảng cách từ điểm đầu đến góc xa nhất.

contain: Bán kính được tính như closest-side và hiệu ứng gradient sẽ chỉ có tác dụng trong phạm vi bán kính đó.

radial-gradient(20px 30px, contain, red, yellow, green)

cover: Như contain nhưng hiệu ứng có tác dụng trên toàn bộ đối tượng.

radial-gradient(20px 30px, circle contain, red, yellow, green)

Color-stop các bạn áp dụng y như bài về Linear Gradient.

Ví dụ

Đoạn mã css sau sẽ tạo ra 2 hiệu ứng gradient như ở trang demo

.gradient3 {
  background: -moz-radial-gradient(center 45deg, circle closest-corner, #00a6dd 0%, #00769D 100%);
  background: -webkit-gradient(radial, center center, 0, center center, 70, from(#00a6dd), to(#00769D));
  width: 200px; height: 200px;
}
.gradient4 {
  background: -moz-radial-gradient(bottom left 90deg, farthest-side, #00a6dd 0%, #00769D 100%);
  background: -webkit-gradient(radial, center center, 0, center center, 70, from(#00a6dd), to(#00769D));
  width: 300px; height: 200px;
}