Sử dụng CSS3 Linear và Radial Gradients

CSS3 hỗ trợ 3 loại gradient chính: Linear (tuyến tính), Radial (trung tâm放射), Conic (xoay quanh tâm - CSS3 mới).

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

/* Cú pháp cơ bản */
linear-gradient(direction, color-stop1, color-stop2, ...)

/* Ví dụ */
.linear {
  height: 100px;
  width: 300px;
  background-image: linear-gradient(rgb(255, 0, 200), yellow); /* Mặc định to bottom */
}

2. Radial Gradient (Trung tâm放射)

/* Cú pháp */
radial-gradient(shape size at position, color-stop1, color-stop2, ...)

/* Ví dụ */
.radial {
  height: 200px; width: 200px;
  background-image: radial-gradient(circle at center, rgb(255, 0, 200), yellow);
}

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

3. Conic Gradient (Xoay quanh tâm) - CSS Images Level 4

/* Cú pháp */
conic-gradient(from angle at position, color-stop1, color-stop2, ...)

/* Ví dụ: Pie chart, color wheel */
.conic {
  width: 200px; height: 200px; border-radius: 50%;
  background: conic-gradient(from 0deg, red, yellow, lime, cyan, blue, magenta, red);
}

Ví dụ mã nguồn so sánh Linear vs Radial

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding: 20px; }
  .gradients { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
  .grad-box { flex: 1 1 250px; min-height: 200px; border-radius: 12px; border: 1px solid #ddd; display: flex; flex-direction: column; }
  .grad-box h3 { text-align: center; padding: 10px; margin: 0; color: white; text-shadow: 1px 1px 2px #000; }
  .linear { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
  .radial { background: radial-gradient(circle at 30% 30%, #f093fb 0%, #f5576c 100%); }
  .conic { background: conic-gradient(from 0deg, #ff6b6b, #feca57, #48dbfb, #ff6b6b); border-radius: 50%; }
  .repeating-linear { background: repeating-linear-gradient(45deg, #fff, #fff 10px, #f0f0f0 10px, #f0f0f0 20px); }
  .repeating-radial { background: repeating-radial-gradient(circle at center, #333, #333 10px, #666 10px, #666 20px); border-radius: 50%; }
  .multi-bg { background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://picsum.photos/400/300'); background-size: cover; }
</style>
</head>
<body>
<h1>CSS3 Gradients: Linear, Radial, Conic, Repeating</h1>
<div class="gradients">
  <div class="grad-box linear"><h3>Linear</h3></div>
  <div class="grad-box radial"><h3>Radial</h3></div>
  <div class="grad-box conic"><h3>Conic</h3></div>
  <div class="grad-box repeating-linear"><h3>Repeating Linear</h3></div>
  <div class="grad-box repeating-radial"><h3>Repeating Radial</h3></div>
  <div class="grad-box multi-bg"><h3>Gradient + Image</h3></div>
</div>
</body>
</html>

Bảng so sánh