Trình tạo Gradient CSS
Tạo gradient CSS tuyến tính hoặc xuyên tâm một cách trực quan và sao chép CSS sẵn sàng sử dụng, ngay trong trình duyệt của bạn.
🔒 Xử lý cục bộ ngay trên trình duyệt của bạn
Loading…
Cách sử dụng
- Chọn Tuyến tính hoặc Xuyên tâm làm loại gradient. Với gradient tuyến tính, kéo thanh trượt hoặc nhập giá trị để đặt góc theo độ.
- Mỗi điểm màu có một ô màu và một vị trí (0-100%). Nhấp vào ô màu để chọn màu, hoặc nhập vị trí để di chuyển điểm đó dọc theo gradient.
- Dùng "Thêm điểm màu" để thêm tối đa 5 điểm màu, hoặc nhấp "Xóa" bên cạnh một điểm để xóa nó (cần tối thiểu 2 điểm màu).
- Khung xem trước phía trên phần CSS đầu ra sẽ cập nhật trực tiếp ngay khi bạn điều chỉnh bất kỳ tùy chọn nào — không cần nhấn nút nào.
- Nhấp Sao chép để sao chép đoạn khai báo CSS đã tạo, sẵn sàng dán vào stylesheet của bạn.
Tính năng
- Hỗ trợ cả gradient tuyến tính (có thể điều chỉnh góc) và xuyên tâm
- Tối đa 5 điểm màu, mỗi điểm có màu và vị trí riêng
- Khung xem trước trực tiếp, cập nhật ngay lập tức khi chỉnh sửa bất kỳ tùy chọn nào
- Sao chép chỉ với một cú nhấp đoạn khai báo CSS sẵn sàng để dán
- Hoạt động 100% phía trình duyệt — gradient của bạn không bao giờ rời khỏi trình duyệt
Câu hỏi thường gặp
Công cụ này có gửi gradient của tôi đi đâu không?
Không. Gradient được tạo và xem trước hoàn toàn bằng JavaScript và CSS cục bộ — không có gì bị tải lên hay gửi đến máy chủ.
Tôi có thể thêm bao nhiêu điểm màu?
Tối đa 5 điểm. Cần tối thiểu 2 điểm để gradient có ý nghĩa, vì vậy nút Xóa sẽ bị vô hiệu hóa khi chỉ còn 2 điểm.
Tùy chỉnh góc có tác dụng gì với gradient xuyên tâm không?
Không. Gradient xuyên tâm trong công cụ này luôn lan tỏa ra ngoài từ tâm theo hình tròn, vì vậy tùy chỉnh góc chỉ áp dụng cho gradient tuyến tính.
Điều gì xảy ra nếu hai điểm màu có cùng vị trí?
Điều này được cho phép và có thể được sử dụng có chủ đích để tạo ra một ranh giới màu sắc rõ nét thay vì chuyển màu mượt — cả hai điểm đều được giữ lại trong CSS được tạo ra.
Tôi có thể dán kết quả trực tiếp vào tệp CSS của mình không?
Có. Khung kết quả hiển thị một khai báo `background: ...;` hoàn chỉnh mà bạn có thể dán nguyên trạng vào stylesheet hoặc style nội tuyến.