Đặt hướng Linear Gradient bằng góc (Angle) trong CSS

Thay vì từ khóa hướng (to right, to bottom left), có thể dùng góc độ (deg) để kiểm soát chính xác góc gradient.

Cú pháp góc độ

/* 0deg = to top (lên), 90deg = to right (phải), 180deg = to bottom (xuống), 270deg = to left (trái) */
background-image: linear-gradient(90deg, red, blue);    /* Trái → Phải */
background-image: linear-gradient(-90deg, red, blue);   /* Phải → Trái */
background-image: linear-gradient(45deg, red, blue);    /* Góc 45° (trên phải) */
background-image: linear-gradient(135deg, red, blue);   /* Góc 135° (dưới phải) */

Ví dụ mã nguồn

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; }
  div { height: 200px; width: 300px; display: inline-block; margin-right: 20px; border-radius: 8px; }
  .g90 { background-image: linear-gradient(90deg, rgb(255, 0, 200), yellow); }
  .gn90 { background-image: linear-gradient(-90deg, rgb(255, 0, 200), yellow); }
  .g45 { background-image: linear-gradient(45deg, rgb(255, 0, 200), yellow); }
  .g135 { background-image: linear-gradient(135deg, rgb(255, 0, 200), yellow); }
  .g0 { background-image: linear-gradient(0deg, rgb(255, 0, 200), yellow); }
  .g180 { background-image: linear-gradient(180deg, rgb(255, 0, 200), yellow); }
</style>
</head>
<body>
<h1>Linear Gradient Direction using Angles</h1>
<div class="g90"><p>90deg (to right)</p></div>
<div class="gn90"><p>-90deg (to left)</p></div>
<div class="g45"><p>45deg</p></div>
<div class="g135"><p>135deg</p></div>
<div class="g0"><p>0deg (to top)</p></div>
<div class="g180"><p>180deg (to bottom)</p></div>
</body>
</html>

Quy tắc góc độ

• 0deg / 360deg: To top (lên) - màu đầu ở dưới, màu cuối ở trên
• 90deg: To right (phải) - màu đầu ở trái, màu cuối ở phải
• 180deg: To bottom (xuống) - màu đầu ở trên, màu cuối ở dưới
• 270deg / -90deg: To left (trái) - màu đầu ở phải, màu cuối ở trái
• Góc âm = xoay ngược chiều kim đồng hồ

So sánh: Keywords vs Angles

Khi nào dùng Angle?

• Cần góc chính xác không có trong keywords (ví dụ: 30deg, 60deg)
• Animation xoay gradient liên tục
• Tính toán toán học/góc động từ JavaScript
• Conic-gradient (chỉ dùng angle)