Thiết lập hình dạng gradient radial (radial gradient shape) với CSS

Gradient radial (tính từ tâm) có thể có hình dạng circle (tròn) hoặc ellipse (elip - mặc định). Cú pháp:

background-image: radial-gradient(shape, color-stop1, color-stop2, ...);

Ví dụ

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    #radial {
      height: 200px;
      width: 300px;
      background-image: radial-gradient(ellipse, rgb(217, 255, 0), rgb(255, 0, 0), rgb(14, 239, 255));
      border: 1px solid #ccc;
    }
    #radial-circle {
      height: 200px;
      width: 300px;
      margin-top: 20px;
      background-image: radial-gradient(circle, rgb(217, 255, 0), rgb(255, 0, 0), rgb(14, 239, 255));
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <h1>Ví dụ Hình Dáng Radial Gradient</h1>
  <h3>Ellipse (mặc định)</h3>
  <div id="radial"></div>
  <h3>Circle</h3>
  <div id="radial-circle"></div>
</body>
</html>

Kết quả

Hai hộp gradient cùng màu nhưng hình dạng khác: ellipse co giãn theo tỷ lệ hộp, circle giữ tròn tròn.

Tham số vị trí

Có thể chỉ định vị trí tâm: radial-gradient(circle at top left, ...), at center, at 50px 50px...