Về công cụ này
Gradient CSS có mặt khắp nơi — nền hero, nút bấm, card — nhưng viết tay cú pháp và đoán góc thì lằng nhằng. Trình dựng trực quan này cho bạn thêm và kéo các điểm màu, đặt góc, và chuyển giữa gradient linear, radial, conic trong khi xem kết quả lấp đầy khung xem trước trực tiếp.
Khi đã ưng, copy đoạn CSS background dựng sẵn thẳng vào stylesheet. Nó hoàn toàn client-side nên bạn cứ thử thoải mái — không gì được gửi đi đâu.
Câu hỏi thường gặp
Công cụ này có thêm tiền tố trình duyệt như -webkit-linear-gradient không?
Không. Cú pháp có tiền tố nhà cung cấp chỉ cần thiết cho các trình duyệt rất cũ (trước năm 2012), nên công cụ chỉ xuất ra linear-gradient(), radial-gradient() và conic-gradient() chuẩn, mọi trình duyệt hiện đại đều hiểu được.
Thiết kế gradient của tôi có được tải lên hay lưu ở đâu không?
Không. Mọi thứ — điểm màu, góc độ, bản xem trước — đều được tạo trực tiếp trong trình duyệt của bạn; không có gì được gửi lên máy chủ.
Gradient tuyến tính, xuyên tâm và hình nón khác nhau thế nào?
Tuyến tính (linear) pha trộn màu dọc theo một đường thẳng ở góc bạn chọn, xuyên tâm (radial) lan tỏa ra ngoài theo hình tròn từ một điểm trung tâm, còn hình nón (conic) xoay màu quanh một điểm trung tâm giống như bánh xe màu.
Tôi có thể thêm bao nhiêu điểm màu?
Bao nhiêu tùy ý — nhấn 'Add' để thêm điểm mới, kéo thanh trượt vị trí, và có thể xóa bất kỳ điểm nào trừ hai điểm cuối cùng.
Tôi có thể dán trực tiếp CSS được tạo vào stylesheet của mình không?
Có. Nhấn Copy rồi dán dòng `background: ...;` thẳng vào bất kỳ quy tắc CSS hay inline style nào — không cần chỉnh sửa gì thêm.