Hàm linear-gradient() trong CSS - Tạo gradient tuyến tính

Hàm linear-gradient() được dùng để định nghĩa gradient tuyến tính làm hình ảnh nền:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Thiết lập điểm bắt đầu và hướng, cùng với các color-stop để render chuyển đổi mượt mà.

Ví dụ 1: Gradient góc phải dưới

<!DOCTYPE html>
<html>
<head>
<style>
div {
  text-align: justify;
  text-justify: inter-word;
  color: white;
  background-image: linear-gradient(to bottom right, red, blue);
  position: absolute;
  right: 90px;
}
</style>
</head>
<body>
<h2>Tiêu đề Demo</h2>
<div>Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.</div>
</body>
</html>

Kết quả

Ví dụ 2: Gradient cầu vồng ngang

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: linear-gradient(to right, yellow, orange, yellow, green, blue, indigo, violet);
}
.demo {
  text-decoration: overline;
  text-decoration-color: yellow;
  font-size: 1.3em;
}
</style>
</head>
<body>
<h1>Chi tiết kỳ thi</h1>
<p class="demo">Kỳ thi ngày 20 tháng 12.</p>
<p class="demo2">Kỳ thi bắt đầu lúc 9AM.</p>
</body>
</html>

Kết quả

Hướng thường dùng:

• to right, to left, to top, to bottom
• to top right, to bottom left, v.v.
• Góc độ: 45deg, 90deg

Cũng có repeating-linear-gradient() cho gradient lặp lại.