Gradient tuyến tính (Linear Gradients) trong CSS3

Giới thiệu

Linear Gradient tạo chuyển màu mượt mà theo một đường thẳng (trục). Hỗ trợ 2+ màu, kiểm soát góc, vị trí dừng màu (color stops), trong suốt, lặp lại.

Cú pháp cơ bản

background: linear-gradient([<angle> | to <side-or-corner>], <color-stop>[, <color-stop>]+);

Góc: 0deg (từ dưới lên), 90deg (từ trái sang phải), 180deg (từ trên xuống), to top/right/bottom/left, to top right...
Color stop: color hoặc color <position> (%, px). Mặc định phân bố đều.

Ví dụ: Top to Bottom (mặc định)

<!DOCTYPE html>
<html>
<head>
  <style>
    #grad1 {
      height: 100px;
      width: 100%;
      /* Cú pháp chuẩn + prefix cho trình duyệt cũ */
      background: -webkit-linear-gradient(pink, green);   /* Safari 5.1-10 */
      background: -o-linear-gradient(pink, green);        /* Opera 11.1-12 */
      background: -moz-linear-gradient(pink, green);      /* Firefox 3.6-15 */
      background: linear-gradient(pink, green);           /* Chuẩn W3C */
    }
  </style>
</head>
<body>
  <div id="grad1"></div>
</body>
</html>

Các hướng gradient phổ biến

Mô tả	Cú pháp hiện đại	Cú pháp cũ (prefix)
Trên → Dưới (mặc định)	`linear-gradient(pink, green)`	`-webkit-linear-gradient(top, pink, green)`
Dưới → Trên	`linear-gradient(to top, pink, green)`	`-webkit-linear-gradient(bottom, pink, green)`
Trái → Phải	`linear-gradient(to right, pink, green)`	`-webkit-linear-gradient(left, pink, green)`
Phải → Trái	`linear-gradient(to left, pink, green)`	`-webkit-linear-gradient(right, pink, green)`
Góc trên trái → Dưới phải	`linear-gradient(to bottom right, pink, green)`	`-webkit-linear-gradient(left top, pink, green)`
Góc dưới trái → Trên phải	`linear-gradient(to top right, pink, green)`	`-webkit-linear-gradient(left bottom, pink, green)`
Góc tùy chỉnh	`linear-gradient(45deg, pink, green)`	`-webkit-linear-gradient(45deg, pink, green)`

Color Stops — Kiểm soát vị trí màu

/* Phân bố đều (mặc định) */
linear-gradient(red, yellow, green)

/* Tùy chỉnh vị trí % */
linear-gradient(red 10%, yellow 50%, green 90%)

/* Tùy chỉnh vị trí px (ít dùng) */
linear-gradient(red 20px, yellow 100px, green 200px)

/* Hard stop (chuyển đột ngột) */
linear-gradient(red 50%, blue 50%)

/* Multi-stop cùng vị trí */
linear-gradient(red 30%, orange 30%, yellow 60%, green 60%)

Transparency & Transparent Keyword

/* Fade to transparent */
linear-gradient(rgba(255,0,0,1), rgba(255,0,0,0))
linear-gradient(red, transparent)

/* Rainbow với transparency */
linear-gradient(
  to right,
  rgba(255,0,0,0), rgba(255,0,0,1) 20%,
  rgba(255,255,0,1) 40%, rgba(0,255,0,1) 60%,
  rgba(0,0,255,1) 80%, rgba(0,0,255,0) 100%
)

Repeating Linear Gradient

/* Sọc sọc tự động lặp */
repeating-linear-gradient(
  45deg,
  #667eea 0, #667eea 10px,
  #764ba2 10px, #764ba2 20px
)

Hỗ trợ trình duyệt

Chuẩn (unprefixed): Chrome 26+, Firefox 16+, Safari 7+, Edge 12+, Opera 12.1+
Prefix -webkit-: Safari 4-6, Chrome 10-25, iOS Safari 4-6, Android Browser 4.4
Prefix -moz-: Firefox 3.6-15
Prefix -o-: Opera 11.1-12
IE 10+ (unprefixed), IE 6-9: dùng filter DXImageTransform (khác hoàn toàn)

Best Practice 2024

/* Chỉ cần cú pháp chuẩn cho production hiện đại */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* Fallback cho trình duyệt cực cũ (hiếm cần) */
background: #667eea; /* Fallback solid color */
background: linear-gradient(135deg, #667eea, #764ba2);