Linear-gradient trong css

July 14, 2020
|
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).

Xem thêm bài viết về: Linear-gradient trong css

‍