Tạo CSS Gradient
Tạo dải màu gradient nhiều màu một cách trực quan và sao chép luôn quy tắc background để dùng ngay. Rất tiện khi bạn cần nền gradient cho hero section, nút bấm hay thẻ card mà không phải tự viết cú pháp.
Các bước sử dụng
- Chọn Kiểu gradient bằng nút gạt: Tuyến tính, Tỏa tròn, và nay có thêm Hình nón cùng Mesh.
- Với kiểu Tuyến tính, kéo thanh Góc (0°–360°) để đặt hướng. (Tỏa tròn luôn dùng dạng
circle.) - Với kiểu Hình nón, đặt Góc bắt đầu cho điểm khởi đầu của vòng quét màu, và Tâm X / Tâm Y cho tâm quay của nó.
- Trong phần Điểm màu, chọn từng màu bằng bảng chọn màu và đặt vị trí bằng thanh trượt hoặc ô số
%. - Bấm Thêm điểm để thêm màu mới, hoặc bấm biểu tượng thùng rác đỏ để xóa (luôn giữ tối thiểu 2 điểm màu).
- Với kiểu Mesh, danh sách điểm màu được thay bằng thẻ Điểm mesh: chọn lưới 2×2, 3×3 hoặc 4×4, đặt màu cùng tọa độ X / Y cho từng điểm, chỉnh thanh Hạt nhiễu, và bấm Ngẫu nhiên để xáo lại bảng màu.
- Quan sát khung xem trước ở phía trên cập nhật ngay khi bạn chỉnh.
- Bấm Sao chép ở ô CSS để lấy toàn bộ khai báo
background: …;. Ở kiểu Mesh có thêm hai nút PNG và SVG để xuất thành file ảnh.
Mẹo
- Các điểm màu không cần nhập theo thứ tự — công cụ tự sắp xếp theo vị trí, nên điểm ở 20% luôn nằm trước điểm ở 80%.
- Thanh Góc chỉ áp dụng cho kiểu Tuyến tính; nếu không thấy nó, hãy chuyển về Tuyến tính. Kiểu Hình nón có thanh riêng là Góc bắt đầu.
- Muốn có ranh giới hai màu sắc nét thay vì chuyển màu mượt, hãy đặt hai điểm màu ở cùng (hoặc gần cùng) một phần trăm.
- Tuyến tính, Tỏa tròn và Hình nón đều là CSS gốc: đoạn khai báo trong ô CSS hiển thị y hệt khung xem trước trên mọi trình duyệt hiện đại.
- Mesh thì không phải CSS gốc. Khung xem trước được vẽ bằng cách nội suy giữa các điểm màu, và CSS không có cấu trúc nào tái tạo được đúng như vậy. Trong ba cách xuất ra, chỉ một cách là chính xác:
- PNG — chính xác. Đây đúng là phép nội suy mà khung xem trước đang hiển thị, dựng ở kích thước 1600 × 640, có cả phần Hạt nhiễu.
- SVG — chỉ gần đúng. Nó xếp chồng mỗi điểm màu thành một radial gradient mềm trên một màu nền: nhìn giống nhưng không phải cùng một bức hình, và không mang theo phần nhiễu hạt.
- Đoạn CSS khi bấm Sao chép — cũng là bản gần đúng y như SVG, viết dưới dạng nhiều lớp
radial-gradient(). Đây vẫn là một khai báo thật, dán vào là dùng được, và trong chính đoạn mã có ghi chú nói rõ điều đó.
- Vậy nên: dán CSS khi bạn cần "gần giống là đủ, miễn vẫn là CSS", còn xuất PNG khi bức hình bắt buộc phải khớp đúng khung xem trước.
- Đổi kích thước lưới Mesh sẽ đặt lại các điểm về bố cục khởi đầu, nên hãy chọn lưới trước rồi mới chỉnh màu.
Câu hỏi thường gặp
Tôi có thể tạo gradient nhiều hơn hai màu không?
Có. Bấm Thêm điểm cho mỗi màu bổ sung; mỗi điểm màu có bảng chọn màu và điều khiển vị trí riêng.
Vì sao tôi không xóa được điểm màu?
Một gradient cần ít nhất hai màu, nên nút xóa sẽ bị vô hiệu hóa khi chỉ còn hai điểm màu.
Bấm Sao chép sẽ cho tôi chính xác cái gì?
Toàn bộ khai báo CSS, ví dụ background: linear-gradient(90deg, #1677ff 0%, #ff4d4f 100%);, sẵn sàng dán vào file style của bạn. Với kiểu Hình nón đó là conic-gradient(from Ndeg at X% Y%, …); với Mesh đó là một background-color kèm một chồng lớp radial-gradient().
Vì sao Mesh của tôi trông khác đi sau khi dán CSS?
Vì đoạn CSS chỉ là bản gần đúng. Khung xem trước nội suy mượt giữa tất cả các điểm màu cùng lúc, trong khi CSS chỉ có thể xếp chồng những radial gradient độc lập lên một màu nền. Hai bên giống nhau chứ không đồng nhất, và bản CSS không có phần nhiễu hạt.
Bản xuất Mesh nào khớp đúng khung xem trước?
Là PNG. Nó chạy lại đúng phép nội suy mà khung xem trước dùng, ở độ phân giải xuất file và có áp Hạt nhiễu. Bản SVG là vector và phóng to thoải mái, nhưng được dựng từ cùng phép xấp xỉ radial nhiều lớp như CSS, nên hãy coi nó là "gần đúng" chứ không phải "chính xác".
Thanh Hạt nhiễu ảnh hưởng thế nào tới các file xuất ra?
Nó thêm phần nhiễu hạt mịn mà bạn thấy trong khung xem trước, và được nướng thẳng vào file PNG. SVG và CSS không có cách nào diễn tả nó nên xuất ra sẽ mịn trơn.