การสร้าง Linear Gradients ด้วย Multiple Color Stops ใน CSS

Linear Gradient หลายสี: กำหนด Color Stops มากกว่า 2 สี

linear-gradient() รับ color stops ไม่จำกัดจำนวน สร้างไล่สีสับสน/รุ้งเรือง ได้โดยระบุสีต่อเนื่องกัน (หรือระบุตำแหน่ง %)

โค้ดตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    div { height: 200px; width: 100%; display: inline-block; margin-right: 10px; }
    .linearGradient { background-image: linear-gradient(to left, orange, blue, green, pink, yellow); }
  </style>
</head>
<body>
  <h1>Linear Gradient หลาย Color Stops</h1>
  <div class="linearGradient"></div>
</body>
</html>

ควบคุมตำแหน่ง Color Stops

.controlled {
  background: linear-gradient(
    to right,
    red 0%,       /* เริ่มที่ 0% */
    orange 20%,   /* ส้มที่ 20% */
    yellow 40%,   /* เหลืองที่ 40% */
    green 60%,    /* เขียวที่ 60% */
    blue 80%,     /* น้ำเงินที่ 80% */
    purple 100%   /* ม่วงที่ 100% */
  );
}

Hard Stops (สีเปลี่ยนทันที ไม่ไล่)

.stripes {
  background: linear-gradient(
    to right,
    red 0%, red 20%,
    orange 20%, orange 40%,
    yellow 40%, yellow 60%,
    green 60%, green 80%,
    blue 80%, blue 100%
  );
}

Repeating Linear Gradient (Stripes Pattern)

.stripes {
  background: repeating-linear-gradient(
    45deg,
    #fff, #fff 10px,
    #f0f0f0 10px, #f0f0f0 20px
  );
}

應用

• Background hero sections
• Progress bars, loading indicators
• Decorative borders, dividers
• CSS-only patterns (checkerboard, stripes, polka dots)