Linear Gradient หลายสี (Multiple Color Stops) ใน CSS

สำหรับ Linear Gradient ที่มีหลายจุดสี (Color Stops) สามารถระบุสีหลายสีในฟังก์ชัน linear-gradient() ได้

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

<!DOCTYPE html>
<html>
<head>
  <style>
    #demo {
      height: 100px;
      background: linear-gradient(blue, orange, yellow, gray);
    }
  </style>
</head>
<body>
  <h2>Linear Gradient</h2>
  <div id="demo">Multiple Color Stops</div><br>
</body>
</html>

คำอธิบาย: โค้ดนี้สร้าง gradient ที่เปลี่ยนสีจาก น้ำเงิน → ส้ม → เหลือง → เทา โดยอัตโนมัติ CSS จะกระจายสีอย่างเท่าเทียมกัน คุณสามารถระบุตำแหน่งสีได้โดยใช้เปอร์เซ็นต์ เช่น linear-gradient(blue 20%, orange 50%, yellow 80%, gray)