CSS gradients cho phép bạn hiển thị các chuyển đổi mượt mà giữa hai hoặc nhiều màu được chỉ định

Trong CSS có ba loại gradients:

  • Linear Gradients
  • Radial Gradients
  • Conic Gradients

1. CSS Linear Gradients

Để tạo một Linear Gradients, bạn phải xác định ít nhất hai điểm dừng màu. Điểm dừng màu là những màu bạn muốn tạo ra các chuyển tiếp mượt mà giữa các màu. 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 gradient

Cú pháp:

background-image: linear-gradient(Hướng, color-stop1, color-stop2, ...);

Ví dụ:

Hướng: Từ trên xuống dưới (mặc định)

Hướng: Từ trái qua phải

Hướng: từ dưới bên phải lên trên bên trái

1.1 Sử dụng góc

Nếu bạn muốn kiểm soát nhiều hơn hướng của gradient, bạn có thể xác định một góc, thay vì các hướng được xác định trước (to bottom, to top, to right, to left, to bottom right, ..v.v.). Ví dụ như: Giá trị 0 deg tương đương với “to top”. Giá trị 90deg tương đương với “to right”. Giá trị 180deg tương đương với “to bottom”

background-image: linear-gradient(Góc, color-stop1, color-stop2);

Ví dụ:

1.2 Sử dụng nhiều màu

Ví dụ:

1.3 Sử dụng độ trong suốt

CSS gradient cũng hỗ trợ độ trong suốt, có thể được sử dụng để tạo hiệu ứng mờ dần

Để thêm độ trong suốt, chúng ta sử dụng màu rgba () để xác định các điểm dừng màu. Tham số cuối cùng trong màu rgba () có thể là một giá trị từ 0 đến 1 và nó xác định độ trong suốt của màu: 0 cho biết độ trong suốt hoàn toàn, 1 cho biết màu đầy đủ (không trong suốt)

Ví dụ:

1.4 Lặp lại Linear Gradients

Hàm repeating-linear-gradient() được sử dụng để lặp lại các Linear Gradients

Ví dụ:

2. CSS Radial Gradients

Một Radial Gradients được xác định bởi tâm của nó

Để tạo một Radial Gradients, bạn cũng phải xác định ít nhất hai điểm dừng màu

Cú pháp:

background-image: radial-gradient(màu ở trung tâm, màu bắt đầu, ..., màu kết thúc);

Ví dụ:

Radial Gradient – Các điểm dừng màu có khoảng cách đều nhau (mặc định)

Radial Gradient – Các điểm dừng màu có khoảng cách khác nhau

2.1 Dặt hình dạng cho Radial Gradient

Tham số hình dạng xác định hình dạng. Nó có thể lấy giá trị hình tròn (circle) hoặc hình elip. Giá trị mặc định là hình elip

Ví dụ:

2.2 Sử dụng tham số kích thước

Tham số kích thước xác định kích thước của gradient. Nó có thể nhận bốn giá trị:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

Ví dụ:

2.3 Lặp lại Radial Gradient

Hàm repeating-radial-gradient () được sử dụng để lặp lại các Radial Gradient

Ví dụ:

3. CSS Conic Gradients

Gradient conic là một gradient với các chuyển đổi màu được quay xung quanh một điểm trung tâm.

Để tạo một conic gradient , bạn phải xác định ít nhất hai màu

Cú pháp:

background-image: conic-gradient ([từ góc] [tại vị trí,] màu [độ], màu [độ], ...);

Theo mặc định, góc là 0deg và vị trí là trung tâm

Nếu không có góc nào được chỉ định, các màu sẽ được trải đều xung quanh điểm trung tâm

Ví dụ:

3.1 Tạo biểu đồ hình tròn

Chỉ cần thêm thuộc tính border-radius: 50% để làm cho conic gradient sẽ trở thành hình tròn

Ví dụ:

3.2 Lặp lại Conic Gradient

Hàm repeating-conic-gradient () được sử dụng để lặp lại các conic gradient

Ví dụ: