Tạo gradient CSS (tuyến tính, hướng tâm, hình nón)

Ba loại gradient trong CSS

Gradient tuyến tính: màu sắc chuyển đổi dọc theo đường thẳng ở góc cho trước. 0° hướng lên, 90° hướng sang phải (hướng đọc mặc định), 180° hướng xuống. Phổ biến nhất cho nền, nút và phần hero.

Gradient hướng tâm: màu sắc chuyển đổi từ điểm trung tâm ra ngoài. Hình có thể là hình tròn (mặc định của chúng tôi) hoặc hình elip. Tốt nhất cho hiệu ứng ánh sáng, yếu tố kiểu mặt trời hoặc điểm nhấn trung tâm thu hút sự chú ý.

Gradient hình nón: màu sắc xoay quanh điểm trung tâm, giống như bánh xe màu. Ít phổ biến hơn nhưng mạnh mẽ cho biểu đồ hình tròn, mặt đồng hồ hoặc con quay trang trí. Được hỗ trợ trong các trình duyệt hiện đại từ năm 2020.

Điểm màu và hệ thống phần trăm

Mỗi điểm màu có một màu và vị trí từ 0% đến 100%. 0% là đầu gradient, 100% là cuối. Hai điểm cho gradient hai màu mượt mà. Thêm điểm thứ ba ở giữa tạo ra hòa trộn ba màu hoặc dải sắc nét tùy theo vị trí.

Để chuyển tiếp sắc nét (không hòa trộn), đặt hai điểm ở cùng vị trí với màu khác nhau. Ví dụ, '#000 50%, #fff 50%' tạo ra đường phân cắt đen-trắng sắc nét ở điểm giữa. Đây là cách tạo nền 'sọc'.

Mẹo về hiệu suất và khả năng tiếp cận

Gradient hiển thị tự nhiên không cần HTTP request, khác với ảnh nền. Chúng có thể phóng to vô hạn mà không mất chất lượng. Thân thiện với animation: chuyển đổi vị trí qua background-position hoặc animation các điểm màu với custom properties.

Khả năng tiếp cận: đừng đặt văn bản trực tiếp lên gradient phức tạp nếu độ tương phản thay đổi theo gradient. Hãy dùng lớp phủ màu phẳng, đảm bảo độ sáng trung bình của gradient tương phản với văn bản, hoặc kiểm tra với trình kiểm tra tương phản. WCAG AA yêu cầu 4.5:1 cho văn bản thường, 3:1 cho văn bản lớn.