Tạo CSS3 Radial Gradient (Gradient tâm) hoàn chỉnh

Giới thiệu

Radial Gradient (gradient tâm) tạo hiệu ứng màu lan tỏa từ trung tâm theo hình elip hoặc tròn. Khác với linear gradient (tuyến tính), radial gradient dùng radial-gradient() với cú pháp linh hoạt: vị trí, hình dạng, kích thước, color stops.

Ví dụ hoàn chỉnh - Các loại Radial Gradient

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Radial Gradient CSS</title>
  <style>
    * { box-sizing: border-box; }
    body { font-family: 'Segoe UI', system-ui, sans-serif; padding: 40px 20px; background: #f5f5f5; }
    .grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
    .card { background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
    .card h3 { margin: 0 0 16px; font-size: 16px; color: #333; }
    .demo { width: 100%; height: 180px; border-radius: 12px; }
    /* 1. Basic ellipse (mặc định) */
    .basic { background: radial-gradient(#ff006a, #020080, #00ff2a); }
    /* 2. Circle */
    .circle { background: radial-gradient(circle, #ff6b6b, #4ecdc4, #ffe66d); }
    /* 3. Position: at top left */
    .positioned { background: radial-gradient(circle at top left, #ff9a9e, #fecfef, #fecfef); }
    /* 4. Size: closest-side / farthest-corner */
    .closest-side { background: radial-gradient(circle closest-side at center, #a8edea, #fed6e3); }
    .farthest-corner { background: radial-gradient(circle farthest-corner at center, #a8edea, #fed6e3); }
    /* 5. Multiple color stops */
    .multi-stop { background: radial-gradient(circle at 30% 30%, #ff6b6b 0%, #ee0979 25%, #ff6b6b 50%, #4ecdc4 75%, #ffe66d 100%); }
    /* 6. Repeating radial gradient */
    .repeating { background: repeating-radial-gradient(circle at center, #667eea 0px, #667eea 20px, #764ba2 20px, #764ba2 40px); }
    /* 7. Practical: Vignette effect */
    .vignette { background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.6) 100%), url('https://picsum.photos/seed/vignette/400/300') center/cover; }
    /* 8. Practical: Spotlight */
    .spotlight { background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.8) 0%, transparent 70%), #1a1a2e; }
  </style>
</head>
<body>
  <h1 style="text-align:center; margin-bottom:30px">CSS3 Radial Gradient Examples</h1>
  <div class="grid">
    <div class="card"><h3>1. Basic Ellipse (mặc định)</h3><div class="demo basic"></div></div>
    <div class="card"><h3>2. Circle</h3><div class="demo circle"></div></div>
    <div class="card"><h3>3. Positioned (at top left)</h3><div class="demo positioned"></div></div>
    <div class="card"><h3>4. Closest-side</h3><div class="demo closest-side"></div></div>
    <div class="card"><h3>4. Farthest-corner (mặc định)</h3><div class="demo farthest-corner"></div></div>
    <div class="card"><h3>5. Multi Color Stops</h3><div class="demo multi-stop"></div></div>
    <div class="card"><h3>6. Repeating Radial</h3><div class="demo repeating"></div></div>
    <div class="card"><h3>7. Vignette Effect</h3><div class="demo vignette"></div></div>
    <div class="card"><h3>8. Spotlight</h3><div class="demo spotlight"></div></div>
  </div>
</body>
</html>

Cú pháp đầy đủ

radial-gradient(
  [ [circle || <length>] [at <position>]? , | [ellipse || <length>{2}] [at <position>]? , ]?
  <color-stop>[, <color-stop>]+
)

Tham số chi tiết

Ứng dụng thực tế

• Vignette: Làm tối góc ảnh (radial-gradient transparent → black overlay).
• Spotlight/Hover effect: Tạo hiệu ứng đèn flashlight theo chuột (JS update position).
• Background pattern: repeating-radial-gradient cho vân gỗ, vải, halftone.
• Button hover: Radial gradient từ tâm chuột (cần JS).
• Loading spinner: Conic-gradient phù hợp hơn, nhưng radial cũng dùng được.

Performance

• Gradient được GPU render, nhẹ hơn image.
• Tránh gradient quá phức tạp (>10 stops) trên element lớn, liên tục repaint.
• Dùng will-change: background nếu animate gradient.