CSS gradient là gì?
Tạo gradient tuyến tính, xuyên tâm và hình nón với điểm dừng màu kéo thả, chế độ hòa trộn và CSS sẵn dùng.
CSS gradient là một hình ảnh do trình duyệt tạo ra từ sự chuyển màu mượt mà giữa các màu. Vì được tính khi render nên nó có thể mở rộng đến mọi kích thước mà không bị vỡ và không cần tệp ảnh.
Có ba loại: tuyến tính (hướng hoặc góc), hướng tâm (vòng tròn hoặc elip từ tâm) và hình nón (quét quanh tâm). Mỗi gradient được định nghĩa bởi các điểm dừng màu; mỗi điểm có thể có vị trí và alpha để điều khiển việc hòa màu.
Bạn có thể xếp nhiều gradient bằng cách ngăn cách bằng dấu phẩy trong background-image và kết hợp bằng background-blend-mode để tạo chất liệu phong phú hơn. CSS cũng hỗ trợ nội suy trong các không gian màu như oklch để chuyển màu mượt hơn.
- Gradient tuyến tính phù hợp cho ánh sáng và chiều sâu theo hướng.
- Gradient hướng tâm và hình nón hữu ích cho đèn rọi, vòng tròn và bánh xe màu.
- Điều chỉnh vị trí điểm dừng để chuyển màu sắc nét hơn hoặc mềm hơn.