Thiết lập vị trí color stops (dừng màu) cho gradient với CSS

Color stops trong gradient có thể đặt vị trí bằng % hoặc độ dài tuyệt đối (px, em...). Mặc định phân bố đều.

Ví dụ Linear Gradient

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .even {
      height: 100px;
      background-image: linear-gradient(
        rgb(61, 255, 2),
        rgb(0, 174, 255),
        rgb(255, 29, 29)
      );
    }
    .uneven {
      height: 100px;
      margin-top: 20px;
      background-image: linear-gradient(
        rgb(61, 255, 2) 40%,
        rgb(0, 174, 255) 80%,
        rgb(255, 29, 29) 20%
      );
    }
  </style>
</head>
<body>
  <h1>Vị Trí Color Stops Trong Linear Gradient</h1>
  <h3>Phân Bố Đều (Mặc Định)</h3>
  <div class="even"></div>
  <h3>Phân Bố Không Đều</h3>
  <div class="uneven"></div>
</body>
</html>

Kết quả

• Even: 3 màu chuyển đổi mượt mà, mỗi màu chiếm ~33%
• Uneven: Xanh lá 0-40%, Xanh dương 40-80%, Đỏ 80-100% (vị trí 20% của đỏ tạo hiệu ứng lặp/đè)

Lưu ý

• Vị trí % tính theo chiều dài gradient
• Nếu vị trí giảm (20% sau 80%), màu sẽ bị nén/đè lên nhau
• Có thể dùng px: linear-gradient(red 50px, blue 100px)
• Áp dụng tương tự cho radial-gradient