🌈 Công Cụ Tạo Gradient CSS

Giới thiệu

Công cụ này cho phép bạn xây dựng gradient CSS theo hướng trực quan mà không cần viết một dòng code nào. Chọn giữa linear-gradient và radial-gradient, thiết lập góc hoặc hình dạng, quản lý các điểm màu bằng bộ chọn màu và thanh trượt vị trí, rồi xem trước kết quả trực tiếp theo thời gian thực. Tám bộ cài đặt sẵn (Sunset, Ocean, Aurora, Neon và nhiều hơn nữa) giúp bạn bắt đầu nhanh hơn. Vì mọi thao tác đều chạy cục bộ trên trình duyệt bằng JavaScript thuần, không có dữ liệu màu hay thông tin thiết kế nào rời khỏi thiết bị của bạn — không có máy chủ, không có tài khoản, và không có bất kỳ hình thức theo dõi nào.

Cách sử dụng

1. Chọn kiểu gradient — Linear (tuyến tính) hoặc Radial (hướng tâm) — từ menu thả xuống Gradient type.
2. Với gradient tuyến tính, đặt góc (0–360°) bằng thanh trượt hoặc ô nhập số. Với gradient hướng tâm, chọn Ellipse (hình elip) hoặc Circle (hình tròn) làm hình dạng.
3. Nhấp vào mẫu màu trong bảng Color Stops để mở bộ chọn màu, rồi kéo ô nhập vị trí để đặt từng điểm màu đúng vị trí bạn muốn.
4. Nhấp vào + Add Stop để chèn điểm màu mới được tự động đặt vào khoảng trống lớn nhất, hoặc nhấp nút ✕ để xóa bất kỳ điểm nào (tối thiểu cần 2 điểm).
5. Nhấp vào Copy CSS để sao chép khai báo background: linear-gradient(…) hoặc radial-gradient(…) hoàn chỉnh vào clipboard và dán thẳng vào stylesheet của bạn.

Câu hỏi thường gặp

Công cụ tạo gradient CSS có miễn phí không?

Có, hoàn toàn miễn phí — không cần đăng ký, không cần tài khoản và không có giới hạn sử dụng ẩn. Mở trang và bắt đầu tạo gradient ngay lập tức.

Công cụ này có hoạt động ngoại tuyến không cần kết nối internet không?

Có. Sau khi trang được tải, toàn bộ công cụ hoạt động ngoại tuyến mà không cần gọi API bên ngoài, phụ thuộc CDN hay yêu cầu máy chủ. Bạn có thể dùng an toàn trên máy bay hoặc môi trường bị hạn chế mạng.

Dữ liệu màu sắc hay thiết kế của tôi có được gửi lên máy chủ không?

Không. Toàn bộ quá trình tạo gradient và hiển thị xem trước đều diễn ra cục bộ trên trình duyệt của bạn bằng JavaScript. Lựa chọn màu sắc của bạn chỉ được lưu trong localStorage của trình duyệt và không bao giờ được truyền đi bất kỳ đâu.

Sự khác biệt giữa linear-gradient và radial-gradient là gì?

linear-gradient chuyển đổi màu sắc theo đường thẳng tại một góc nhất định (ví dụ: 135deg). radial-gradient phát tán màu sắc từ một điểm trung tâm ra ngoài theo hình elip hoặc hình tròn. Cả hai đều tạo ra CSS chuẩn hoạt động trên tất cả các trình duyệt hiện đại.

Tôi có thể thêm bao nhiêu điểm màu?

Không có giới hạn tích hợp sẵn — bạn có thể thêm bao nhiêu điểm màu tùy thích (tối thiểu 2). Các điểm mới được tự động đặt vào khoảng trống lớn nhất trong gradient và màu nội suy tại vị trí đó được điền sẵn để tạo điểm khởi đầu mượt mà.