Để thiết lập màu nền gradient với CSS, bạn cần thêm hàm linear-gradient() vào thuộc tính background.
Hãy tạo một class box đơn giản và thử:
<div class="box"></div>.box { width: 200px; height: 200px; background: linear-gradient(yellow, red); }Kết quả:
Bạn có thể thay đổi màu bắt đầu và kết thúc bằng cách sắp xếp lại thứ tự bên trong hàm linear-gradient:
/* Bắt đầu đỏ, kết thúc vàng */ background: linear-gradient(red, yellow);Thay đổi góc/độ nghiêng linear-gradient
Như bạn thấy ở ví dụ trên, hàm linear-gradient() tạo gradient từ trên xuống dưới mặc định. Bạn có thể dễ dàng thay đổi góc gradient thành bất kỳ giá trị nào.
Ví dụ, linear gradient nghiêng 45 độ:
/* Bắt đầu vàng, kết thúc đỏ */ linear-gradient(45deg, yellow, red);Kết quả:
Bạn có thể dùng bất kỳ độ từ 0 đến 360.
Dùng HEX, RGB, hoặc RGBa cho gradient
Bạn có thể dùng mô hình màu HEX, RGB, và RGBa cho linear-gradient. RGBa linh hoạt nhất vì cho phép dùng kênh Alpha (độ trong suốt) trên linear gradient.
Như bạn thấy dưới đây, bạn có thể sáng tạo bao nhiêu tùy thích với gradient khi dùng RGBa:
Đây là CSS cho ví dụ linear-gradient trên:
{ background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); }