Gradient trong CSS: radial, linear và conic gradient

Radial gradient

radial-gradient() chuyển màu từ một điểm tâm lan ra ngoài. Giống mọi gradient trong CSS, nó là một hình ảnh, nên đặt trong background-image (hoặc cách viết tắt background):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radial gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box { width: 220px; height: 120px; border-radius: 8px; margin-bottom: 4px; }
    .ellipse { background-image: radial-gradient(#93c5fd, #1e3a8a); }
    .circle { background-image: radial-gradient(circle, #93c5fd, #1e3a8a); }
    .corner { background-image: radial-gradient(circle at top left, #fde68a, #f59e0b 40%, #b45309); }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box ellipse"></div>ellipse (default)</div>
    <div><div class="box circle"></div>circle</div>
    <div><div class="box corner"></div>circle at top left</div>
  </div>
</body>
</html>

Cú pháp đầy đủ là radial-gradient(shape size at position, color stops). Mọi thứ đứng trước các màu đều không bắt buộc.

Từ khóa kích thước quyết định màu cuối cùng xuất hiện ở đâu: ở cạnh gần nhất của hộp, ở góc xa nhất, và tương tự. Đổi các giá trị ở đây và xem gradient được vẽ lại:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radial gradient tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box { height: 160px; margin-top: 10px; border: 1px solid #d1d5db; border-radius: 8px; }
    #out { font-size: 13px; }
  </style>
</head>
<body>
  <label>radial-gradient( <input id="val" value="circle closest-side at 30% 50%, #f59e0b, #2563eb" size="42"> )</label>
  <div id="box"></div>
  <code id="out"></code>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      const value = 'radial-gradient(' + input.value + ')';
      const ok = CSS.supports('background-image', value);
      if (ok) box.style.backgroundImage = value;
      document.getElementById('out').textContent = ok ? value : 'invalid gradient';
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Thử circle farthest-corner at 30% 50%, #f59e0b, #2563eb, ellipse at bottom, white, #16a34a và circle 40px, #f59e0b 99%, transparent (một chấm tròn có viền sắc nét).

Linear gradient

linear-gradient() chuyển màu dọc theo một đường thẳng. Đặt hướng hoặc góc ở đầu, sau đó là các màu:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Linear gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box { width: 160px; height: 90px; border-radius: 8px; margin-bottom: 4px; }
    .down { background-image: linear-gradient(#2563eb, #16a34a); }
    .right { background-image: linear-gradient(to right, #2563eb, #16a34a); }
    .angle { background-image: linear-gradient(45deg, #2563eb, #16a34a); }
    .three { background-image: linear-gradient(to right, #dc2626, #f59e0b, #16a34a); }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box down"></div>default (to bottom)</div>
    <div><div class="box right"></div>to right</div>
    <div><div class="box angle"></div>45deg</div>
    <div><div class="box three"></div>three colors</div>
  </div>
</body>
</html>

Góc bắt đầu từ 0deg hướng lên trên và quay theo chiều kim đồng hồ, nên 90deg là to right còn 180deg là giá trị mặc định to bottom. to right vẫn là hướng vật lý trên trang viết từ phải sang trái; bạn tự lật nó nếu gradient cần đi theo hướng đọc.

Điểm dừng màu và điểm dừng cứng

Mỗi màu có thể có một vị trí. Không có vị trí thì các màu được chia đều. Khi hai màu chung một vị trí, màu đổi ngay lập tức, và đó là cách vẽ sọc, lá cờ hay thanh tiến độ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color stops</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .bar { height: 40px; border-radius: 6px; margin: 4px 0 12px; }
    .shifted { background: linear-gradient(to right, #2563eb 70%, #f59e0b); }
    .hard { background: linear-gradient(to right, #2563eb 60%, #e5e7eb 60%); }
    .stripes {
      background: repeating-linear-gradient(45deg,
        #f59e0b 0 12px, #111827 12px 24px);
    }
    .rings { height: 120px; background: repeating-radial-gradient(circle, #2563eb 0 8px, #bfdbfe 8px 16px); }
  </style>
</head>
<body>
  Solid until 70%, then blends
  <div class="bar shifted"></div>
  Hard stop at 60% (a progress bar)
  <div class="bar hard"></div>
  repeating-linear-gradient
  <div class="bar stripes"></div>
  repeating-radial-gradient
  <div class="bar rings"></div>
</body>
</html>

Một điểm dừng cũng có thể nhận hai vị trí, #111827 12px 24px, để vẽ một dải màu đặc từ 12px đến 24px.

Conic gradient

conic-gradient() quét màu quanh một điểm tâm, giống kim đồng hồ. Với điểm dừng cứng, nó vẽ được biểu đồ tròn mà không cần hình ảnh hay JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Conic gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; display: flex; gap: 24px; }
    .pie {
      width: 140px; height: 140px; border-radius: 50%;
      background: conic-gradient(#2563eb 0 45%, #16a34a 45% 75%, #f59e0b 75%);
    }
    .wheel {
      width: 140px; height: 140px; border-radius: 50%;
      background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    }
  </style>
</head>
<body>
  <div><div class="pie"></div>45%, 30%, 25%</div>
  <div><div class="wheel"></div>A color wheel</div>
</body>
</html>

Biểu đồ vẽ bằng CSS là vô hình với trình đọc màn hình, nên hãy ghi cả các con số bằng chữ.

Chữ gradient

Cắt nền gradient theo hình các chữ cái và làm cho bản thân chữ trong suốt:

.gradient-text {
  background: linear-gradient(90deg, #2563eb, #db2777);
  -webkit-background-clip: text; /* older browsers need the prefix */
  background-clip: text;
  color: transparent;
}

Nhớ tính đến một màu color thường làm dự phòng: nếu việc cắt không thành công, chữ sẽ biến mất. Chữ gradient cũng có độ tương phản không đều, nên chỉ dùng cho tiêu đề lớn.

Gradient có thể xếp chồng cùng hình ảnh và các gradient khác trong một danh sách background-image; trang background image trình bày về lớp, kích thước và vị trí.

Lỗi thường gặp

• background-color: linear-gradient(...). Gradient là hình ảnh: dùng background-image hoặc background.
• Góc quay sai hướng. 0deg hướng lên trên, không phải sang phải. 90deg mới hướng sang phải.
• Gradient trên phần tử không có chiều cao. Không có gì hiện ra; hãy cho nó nội dung hoặc kích thước.
• Màu ở giữa bị đục. Chuyển giữa hai màu đậm đối lập, như đỏ và xanh lá, sẽ đi qua màu nâu xám trong sRGB. Thêm một điểm dừng ở giữa, hoặc chuyển màu trong một không gian màu khác: linear-gradient(in oklch, red, green).
• Gradient lớn, nhạt bị phân dải. Các màu quá gần nhau trên một vùng rộng sẽ lộ ra từng bậc; tăng độ tương phản giữa các điểm dừng một chút sẽ đỡ hơn.