ใช้มุม (Angles) ใน Linear Gradients ด้วย CSS

ใช้ linear-gradient() ร่วมกับองศา (deg) เพื่อกำหนดทิศทางของ gradient

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

<!DOCTYPE html>
<html>
<head>
  <style>
    #demo1 {
      height: 100px;
      background: linear-gradient(0deg, orange, blue);
    }
    #demo2 {
      height: 100px;
      background: linear-gradient(90deg, orange, blue);
    }
    #demo3 {
      height: 100px;
      background: linear-gradient(-90deg, orange, blue);
    }
  </style>
</head>
<body>
  <h2>Linear Gradients</h2>
  <div id="demo1">0 degree</div><br>
  <div id="demo2">90 degrees</div><br>
  <div id="demo3">-90 degrees</div>
</body>
</html>

คำอธิบายมุม:

• 0deg (หรือ to top): gradient จากล่างขึ้นบน
• 90deg (หรือ to right): gradient จากซ้ายไปขวา
• -90deg (หรือ to left): gradient จากขวาไปซ้าย
• 180deg (หรือ to bottom): gradient จากบนลงล่าง (ค่าเริ่มต้น)