การตั้งค่าทิศทาง Linear Gradients ด้วย Angles ใน CSS

Linear Gradient Angle: ควบคุมทิศทางด้วยองศา (Degrees)

แทน keyword (to right, to top left) ใช้ angle (deg, rad, grad, turn) ควบคุมทิศทางแม่นยำ 0deg = to top, 90deg = to right, 180deg = to bottom, 270deg = to left

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

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    div { height: 200px; width: 300px; display: inline-block; margin-right: 10px; }
    .linearGradient { background-image: linear-gradient(90deg, rgb(255, 0, 200), yellow); }
    .linearGradient1 { background-image: linear-gradient(-90deg, rgb(255, 0, 200), yellow); }
  </style>
</head>
<body>
  <h1>Linear Gradient Direction using Angles</h1>
  <div class="linearGradient"></div>
  <div class="linearGradient1"></div>
</body>
</html>

Angle Reference

ใช้กับ Conic Gradient

.pie-chart {
  background: conic-gradient(
    red 0deg, red 90deg,
    yellow 90deg, yellow 180deg,
    green 180deg, green 270deg,
    blue 270deg, blue 360deg
  );
  border-radius: 50%;
}

Animation Angle

@keyframes rotate-gradient {
  to { background-image: linear-gradient(360deg, red, blue); }
}
.animated { animation: rotate-gradient 4s linear infinite; }