Gradient Đa màu (Multi-color) trong CSS3

Giới thiệu

Multi-color Gradient cho phép chuyển tiếp qua nhiều màu (3, 5, 7, thậm chí 20+ màu) trong một gradient. Tạo hiệu ứng rainbow, spectrum, hoặc brand gradient phức tạp.

Cú pháp

linear-gradient(color1, color2, color3, color4, ...)
/* Mặc định phân bố đều theo số lượng màu */

/* Hoặc chỉ định vị trí */
linear-gradient(color1 10%, color2 30%, color3 60%, color4 100%)

Ví dụ: 7 màu (Rainbow-like)

<!DOCTYPE html>
<html>
<head>
  <style>
    #grad2 {
      height: 100px;
      width: 100%;
      background: -webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet);
      background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet);
      background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet);
      background: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
    }
  </style>
</head>
<body>
  <div id="grad2"></div>
  <p>7 màu chuyển tiếp mượt: Red → Orange → Yellow → Green → Blue → Indigo → Violet</p>
</body>
</html>

Rainbow Gradient chuẩn (ROYGBIV)

/* Cân bằng sắc độ */
linear-gradient(
  hsl(0, 100%, 50%),     /* Red */
  hsl(30, 100%, 50%),    /* Orange */
  hsl(60, 100%, 50%),    /* Yellow */
  hsl(120, 100%, 50%),   /* Green */
  hsl(200, 100%, 50%),   /* Cyan/Blue */
  hsl(260, 100%, 50%),   /* Indigo */
  hsl(300, 100%, 50%)    /* Violet */
)

Ứng dụng thực tế

• Brand gradient: Instagram style (radial), Stripe, Linear
• Progress/Loading bar: Animated background-position
• Text gradient: Hero heading, logo
• Border gradient: border-image: linear-gradient(...) 1;
• Data viz: Heatmap, color scale legend
• Mesh gradient (CSS4): mesh-gradient() — đang phát triển

Ví dụ: Animated Rainbow Border

<style>
  .rainbow-border {
    border: 4px solid transparent;
    border-image: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet) 1;
    border-image-slice: 1;
    animation: border-flow 3s linear infinite;
    border-radius: 12px;
    padding: 20px;
  }
  @keyframes border-flow {
    from { border-image-source: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet); }
    to   { border-image-source: linear-gradient(450deg, red, orange, yellow, green, blue, indigo, violet); }
  }
</style>

Performance Tip

• Quá nhiều color stops (>20) có thể ảnh hưởng render performance
• Dùng will-change: background nếu animate gradient
• Cân nhắc dùng SVG gradient hoặc Canvas cho hiệu ứng phức tạp, animation nặng
• CSS Gradient được cache bởi browser — tái sử dụng class thay vì inline style

Hỗ trợ trình duyệt

• Chuẩn: Chrome 26+, Firefox 16+, Safari 7+, Edge 12+, Opera 12.1+
• Prefix cũ chỉ cần cho legacy support