สร้าง Linear Gradient สีรุ้ง (Rainbow) ด้วย CSS

บทนำ

CSS linear-gradient() สามารถสร้างไล่สีสีรุ้งได้โดยระบุสีหลายสีเรียงติดกัน

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

<!DOCTYPE html>
<html>
<head>
  <style>
    #demo {
      height: 100px;
      background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    }
  </style>
</head>
<body>
  <h2>Linear Gradient</h2>
  <div id="demo">Rainbow</div><br>
</body>
</html>

รูปแบบ Syntax

linear-gradient(direction, color-stop1, color-stop2, ...)

ทิศทาง (Direction)

Rainbow Gradient Variations

1. แนวนอน (Horizontal)

background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);

2. แนวตั้ง (Vertical)

background: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet);

3. แนวทแยง (Diagonal)

background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);

4. กำหนดตำแหน่งสี (Color Stops)

/* แต่ละสีกว้างเท่ากัน 12.5% */
background: linear-gradient(to right, 
  red 0%, red 12.5%,
  orange 12.5%, orange 25%,
  yellow 25%, yellow 37.5%,
  green 37.5%, green 50%,
  blue 50%, blue 62.5%,
  indigo 62.5%, indigo 75%,
  violet 75%, violet 100%
);

5. Repeating Rainbow

background: repeating-linear-gradient(
  to right,
  red, orange, yellow, green, blue, indigo, violet,
  red 100%
);

Browser Support

• Chrome 26+
• Firefox 16+
• Safari 7+ (ต้อง -webkit- prefix เก่า)
• Edge 12+
• IE 10+

การใช้งานจริง

.rainbow-border {
  border: 5px solid;
  border-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) 1;
}

.rainbow-text {
  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}