Trang chủ » HTML và CSS » CSS » Linear-gradient trong css

Linear-gradient trong css

Linear-gradient trong css quét màu xuất phát từ 1 phía, có thể theo chiều lên, xuống, trái, phải, đường chéo. Cho phép tạo ra các phần tử có màu nền background.

Ví dụ

– Linear-gradient bắt đầu ở trên cùng. Nó bắt đầu màu đỏ, chuyển sang màu vàng, sau đó sang màu xanh:

<div id="grad1"></div>
<style>
#grad1 {
  background-image: linear-gradient(red, yellow, blue);
  width: 100%;
  height: 300px;
}
</style>

Kết quả

 

Bạn có thể tham khảo thêm và tạo code css gradient nhanh tại đây: https://cssgradient.io/

Cách sử dụng

– Để tạo một Linear-gradient trong css, bạn phải xác định ít nhất hai điểm dừng màu. Điểm dừng màu là màu bạn muốn hiển thị chuyển tiếp . Bạn cũng có thể đặt điểm bắt đầu và hướng (hoặc góc) cùng với hiệu ứng chuyển màu.

Cú pháp

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

Tham số

  • direction: Xác định điểm bắt đầu và hướng (hoặc góc) cùng với hiệu ứng chuyển màu.
  • color-stop1, color-stop2,…: Điểm dừng màu là màu bạn muốn hiển thị chuyển tiếp. Giá trị này bao gồm một giá trị màu, theo sau là vị trí dừng tùy chọn (tỷ lệ phần trăm từ 0% đến 100% hoặc chiều dài dọc theo trục gradient).

Các ví dụ khác

Ví dụ 1:

– Linear-gradient bắt đầu từ bên trái. Nó bắt đầu màu đỏ, chuyển sang màu xanh:

<div id="grad2"></div>
<style>
#grad2 {
  background-image: linear-gradient(to right, red , blue);
  width: 100%;
  height: 300px;
}
</style>

Kết quả:

 

Ví dụ 2:

– Linear-gradient bắt đầu từ trên cùng bên trái (và đi xuống dưới cùng bên phải):

<div id="grad3"></div>
<style>
#grad3 {
  background-image: linear-gradient(to bottom right, red , blue);
  width: 100%;
  height: 300px;
}
</style>

Kết quả:

 

Ví dụ 3:

– Linear-gradient với một góc xác định:

<div id="grad4"></div>
<style>
#grad4 {
  background-image: linear-gradient(180deg, red, blue);
  width: 100%;
  height: 300px;
}
</style>

Kết quả:

 

Ví dụ 4:

– Linear-gradient with multiple color stops:

<div id="grad5"></div>
<style>
#grad5 {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
  width: 100%;
  height: 300px;
}
</style>

kết quả:

 

Ví dụ 5:

– Linear-gradient với transparency:

<div id="grad6"></div>
<style>
#grad6 {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
  width: 100%;
  height: 300px;
}
</style>

kết quả:

 
  1. Bạn có thể tham khảo thêm các ví dụ về Linear-gradient
  2. Tìm hiểu thêm về Background gradient trong css và Radial Gradients

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *