Các loại Gradient trong CSS

Giới thiệu

Gradient (chuyển màu) hiển thị sự chuyển tiếp mượt mà giữa 2+ màu. CSS hỗ trợ 3 loại chính: Linear, Radial, Conic (CSS Images Level 4).

1. Linear Gradient (Tuyến tính)

Chuyển màu theo đường thẳng.

/* Cú pháp */
linear-gradient([<angle> | to <side-or-corner>], <color-stop-list>)

/* Ví dụ */
linear-gradient(red, blue)                    /* Trên → Dưới */
linear-gradient(to right, red, blue)          /* Trái → Phải */
linear-gradient(45deg, red, blue)             /* Góc 45° */
linear-gradient(to bottom right, red, blue)   /* Chéo */
linear-gradient(red 20%, blue 80%)            /* Color stops */

2. Radial Gradient (Trung tâm)

Chuyển màu từ trung tâm ra ngoài theo hình elip/tron.

/* Cú pháp */
radial-gradient([<shape> || <size>] [at <position>], <color-stop-list>)

/* Shape: circle | ellipse (mặc định ellipse) */
/* Size: closest-side | farthest-side | closest-corner | farthest-corner | explicit size */
/* Position: center (mặc định) | top left | 50% 50% | ... */

radial-gradient(red, blue)                           /* Ellipse, center */
radial-gradient(circle, red, blue)                   /* Tròn */
radial-gradient(circle at top left, red, blue)       /* Tròn tại góc */
radial-gradient(farthest-corner at 50% 50%, red, blue)
radial-gradient(50px 100px at center, red, blue)     /* Kích thước explicit */

3. Conic Gradient (Cung/Kim đồng hồ) — CSS Images 4

Chuyển màu xoay quanh trung tâm (giống kim đồng hồ, pie chart).

conic-gradient([from <angle>] [at <position>], <color-stop-list>)

/* Ví dụ */
conic-gradient(red, yellow, lime, aqua, blue, magenta, red)  /* Color wheel */
conic-gradient(from 0deg at 50% 50%, red 0deg, yellow 90deg, lime 180deg, blue 270deg)
conic-gradient(red 0deg 90deg, yellow 90deg 180deg, green 180deg 270deg, blue 270deg 360deg)  /* Pie chart */

Ví dụ: Radial Gradient

<!DOCTYPE html>
<html>
<head>
  <style>
    #grad1 {
      height: 100px;
      width: 550px;
      background: -webkit-radial-gradient(red 5%, green 15%, pink 60%);
      background: -o-radial-gradient(red 5%, green 15%, pink 60%);
      background: -moz-radial-gradient(red 5%, green 15%, pink 60%);
      background: radial-gradient(red 5%, green 15%, pink 60%);
    }
  </style>
</head>
<body>
  <div id="grad1"></div>
</body>
</html>

Repeating Gradients (Lặp lại)

repeating-linear-gradient(45deg, red 0 10px, blue 10px 20px)
repeating-radial-gradient(circle, red 0 20px, blue 20px 40px)
repeating-conic-gradient(red 0deg 45deg, blue 45deg 90deg)

Bảng so sánh 3 loại

Best Practice

• Luôn có fallback solid color: background: #667eea; background: linear-gradient(...);
• Dùng background-image thay vì background nếu có multiple backgrounds
• Gradient là image — dùng được mọi chỗ nhận <image> (border-image, mask, list-style-image...)
• Performance: Gradient đơn giản rẻ hơn ảnh; gradient phức tạp nhiều stop có thể chậm hơn ảnh nhỏ cache