Cách đặt Màu nền Gradient bằng CSS

Để đặt màu nền gradient bằng CSS, bạn cần thêm linear-gradient() chức năng đối với background của bạn bất động sản.

Hãy tạo một lớp hộp đơn giản và dùng 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 tuyến tính gradient:

/* Starting red, finishing yellow */
 background: linear-gradient(red, yellow);

Thay đổi góc / độ nghiêng tuyến tính-gradient

Như bạn có thể thấy trong các ví dụ ở trên, linear-gradient() hàm tạo ra một gradient từ trên xuống dưới theo mặc định. Bạn có thể dễ dàng thay đổi góc gradient thành bất kỳ thứ gì bạn muốn.

Ví dụ:đây là một gradient tuyến tính nghiêng 45 độ:

/* Starting yellow, finishing red */
linear-gradient(45deg, yellow, red);

Kết quả:

Bạn có thể sử dụng bất kỳ mức độ nào từ 0 đến 360.

Sử dụng HEX, RGB hoặc RGBa cho gradient của bạn

Bạn có thể sử dụng các mô hình màu HEX, RGB và RGBa cho các gradient tuyến tính của mình. RGBa là loại linh hoạt nhất vì nó cho phép bạn sử dụng kênh Alpha (để có độ trong suốt) trên các gradient tuyến tính của bạn.

Như bạn có thể thấy bên dưới, bạn có thể sáng tạo tùy thích với các gradient của mình khi sử dụng RGBa:

Đây là CSS cho ví dụ tuyến tính-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%);
}