การใช้งาน linear-gradient() CSS Function

ใช้ linear-gradient() สร้าง Gradient แบบเส้นตรงเป็น Background Image

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
    <style>
        #demo {
            height: 200px;
            background: linear-gradient(green, orange, maroon);
        }
    </style>
</head>
<body>
    <p>Setting background as linear gradient.</p>
    <div id="demo"></div>
</body>
</html>

รูปแบบการใช้งาน:

• linear-gradient(direction, color-stop1, color-stop2, ...)
• Direction: to right, to bottom right, 45deg, เป็นต้น
• Color Stops: สีพร้อมตำแหน่ง เช่น red 0%, blue 50%, green 100%

ตัวอย่างขั้นสูง: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet) — สร้างรุ้งกินน้ำ