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ụ:
