Đặt kích thước Radial Gradient với CSS

Radial gradient cho phép kiểm soát kích thước (size) và hình dạng (shape) của gradient tròn/elip thông qua tham số thứ 2.

Cú pháp kích thước Radial Gradient

radial-gradient(shape size at position, color-stop1, color-stop2, ...)

/* Size keywords */
farthest-corner (mặc định)  /* Chạm góc xa nhất */
closest-side                /* Chạm cạnh gần nhất */
closest-corner              /* Chạm góc gần nhất */
farthest-side               /* Chạm cạnh xa nhất */

/* Explicit size */
radial-gradient(50px at center, red, blue)           /* Bán kính 50px (tròn) */
radial-gradient(40% 50px at center, red, blue)       /* Elip: ngang 40%, dọc 50px */
radial-gradient(100px 50px at center, red, blue)     /* Elip: 100px x 50px */

Ví dụ mã nguồn

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; }
  .gradients { display: flex; gap: 20px; flex-wrap: wrap; }
  .radial-box {
    width: 200px; height: 200px;
    border: 1px solid #ddd; border-radius: 8px;
    display: flex; flex-direction: column;
  }
  .radial-box > div { flex: 1; border-radius: 0 0 8px 8px; }
  .radial-box label { padding: 10px; text-align: center; font-weight: bold; background: #f5f5f5; border-radius: 8px 8px 0 0; font-size: 14px; }
  
  .size-farthest-corner { background: radial-gradient(farthest-corner at center, #30cfd0 0%, #330867 100%); }
  .size-closest-side { background: radial-gradient(closest-side at center, #30cfd0 0%, #330867 100%); }
  .size-closest-corner { background: radial-gradient(closest-corner at center, #30cfd0 0%, #330867 100%); }
  .size-farthest-side { background: radial-gradient(farthest-side at center, #30cfd0 0%, #330867 100%); }
  .size-explicit { background: radial-gradient(40% 50px at center, rgb(30,255,0), rgb(0,195,255), rgb(128,0,32)); }
  .size-circle { background: radial-gradient(circle 80px at center, #ff6b6b, #feca57); }
</style>
</head>
<body>
<h1>Radial Gradient Size Keywords</h1>
<div class="gradients">
  <div class="radial-box"><label>farthest-corner (default)</label><div class="size-farthest-corner"></div></div>
  <div class="radial-box"><label>closest-side</label><div class="size-closest-side"></div></div>
  <div class="radial-box"><label>closest-corner</label><div class="size-closest-corner"></div></div>
  <div class="radial-box"><label>farthest-side</label><div class="size-farthest-side"></div></div>
  <div class="radial-box"><label>Explicit: 40% 50px</label><div class="size-explicit"></div></div>
  <div class="radial-box"><label>Circle 80px</label><div class="size-circle"></div></div>
</div>
</body>
</html>

Hình dạng (Shape)

• circle: Hình tròn hoàn hảo (bán kính ngang = dọc)
• ellipse (mặc định): Elip theo tỷ lệ container

Vị trí (Position)

radial-gradient(circle at top left, red, blue)       /* Góc trên trái */
radial-gradient(circle at 50% 50%, red, blue)        /* Trung tâm (mặc định) */
radial-gradient(circle at 20px 30px, red, blue)      /* Tọa độ pixel */
radial-gradient(circle at right bottom, red, blue)   /* Góc dưới phải */

Ứng dụng thực tế

• Spotlight/Vignette: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.8))
• Button 3D effect: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent 70%) overlay lên background
• Avatar placeholder: radial-gradient(circle, #ddd 50%, #bbb 100%)
• Progress ring: Conic-gradient phù hợp hơn