Giới thiệu Mesh gradient
Nhiều gradient tỏa tròn, xuất CSS và SVG
Cách sử dụng
Thiết kế gradient lưới đa điểm mượt mà và xuất thành CSS hoặc SVG cho giao diện của bạn.
Mesh gradient
Bốn lớp gradient tỏa tròn phủ trên màu nền. Bản xem trước và CSS cập nhật cùng lúc.
Mesh gradient là gì
Nhiều gradient tỏa tròn được xếp trên một màu nền. Mỗi màu mờ dần thành trong suốt tại vị trí của nó, tạo các chuyển sắc mềm, hữu cơ mà không có một hướng duy nhất.
Vì các lớp độc lập, bạn có thể dời một tâm mà không đổi phần còn lại của bố cục.
Xuất CSS và SVG
Bản CSS dùng background-image với bốn lớp radial-gradient và chạy trên mọi trình duyệt hiện đại. Bản SVG là một tệp di động duy nhất, phù hợp công cụ thiết kế và in ấn.
Câu hỏi thường gặp
Vì sao là bốn màu?
Bốn tâm đủ tạo độ sâu cho hero và thẻ mà không bị đục. Muốn thêm lớp, hãy sửa mã đã xuất.
Làm sao giữ chữ dễ đọc?
Đặt chữ ở vùng yên tĩnh, thêm panel mờ và kiểm tra tương phản bằng công cụ WCAG.
Mesh gradient có được hỗ trợ rộng?
Gradient tỏa tròn nhiều lớp trong CSS được hỗ trợ rộng. Trình duyệt rất cũ có thể chỉ hiện màu nền.