Background gradient trong css

Có 2 loại Background gradient trong css: (1) 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 - (2) Quét màu xuất phát từ tâm. Hãy cùng mình tìm hiểu chi tiết về nó nhé!!!

Gradient Background

- Background gradient trong css cho phép tạo ra các phần tử có màu nền background bao gồm các hiệu ứng chuyển màu giữa hai hay nhiều màu sắc được chỉ định từ trước.

Có 2 loại Background gradient trong css:

1. Linear Gradient: Quét màu xuất phát từ 1 phía (có thể theo chiều đi xuống/lên/trái/ phải/đường chéo).
2. Radial Gradient: Quét màu xuất phát từ tâm.

CSS Linear Gradients

- Để tạo một Linear Gradients 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).

Linear Gradient - Đổ màu từ trên xuống dưới (đây là mặc định)

- Ví dụ sau đây cho thấy một Linear Gradient bắt đầu từ bên trên. Nó bắt đầu màu đỏ, chuyển sang màu vàng:

<style>

#grad2 {

 height: 200px;

 background-color: red; /* For browsers that do not support gradients */

 background-image: linear-gradient(red, yellow); /* Standard syntax (must be last) */

}

</style>

<div id="grad2"></div>

Linear Gradient - từ trái sang phải

- Ví dụ sau đây cho thấy một linear gradient bắt đầu từ bên trái. Nó bắt đầu màu đỏ, chuyển sang màu vàng:

<style>

#grad3 {

 height: 200px;

 background-color: red; /* For browsers that do not support gradients */

 background-image: linear-gradient(to right, red , yellow); /* Standard syntax (must be last) */

}

</style>

<div id="grad3"></div>

Linear Gradient - Đường chéo

- Bạn có thể tạo một linear gradient theo đường chéo bằng cách chỉ định cả vị trí bắt đầu ngang và dọc. Ví dụ sau đây cho thấy một gradient tuyến tính bắt đầu từ trên cùng bên trái (và đi xuống dưới cùng bên phải). Nó bắt đầu màu đỏ, chuyển sang màu vàng:

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

‍