CSS Gradient Generator
Tạo CSS gradient trực quan, nhiều color stops, copy CSS nhanh
Angle
Color Stops
Live Preview
background: linear-gradient(90deg, rgba(102, 126, 234, 1.00) 0%, rgba(118, 75, 162, 1.00) 100%);
💡 Mẹo sử dụng
- • Linear: gradient theo đường thẳng
- • Radial: gradient hình tròn từ tâm
- • Conic: gradient xoay vòng tròn
- • Thêm nhiều color stops để tạo hiệu ứng phức tạp
Gradient CSS đẹp không cần đoán mã màu bằng mắt
Viết tay một dòng linear-gradient() hay conic-gradient() nghe đơn giản, nhưng để canh đúng góc, đúng vị trí từng màu và độ trong suốt thì phải sửa đi sửa lại rất nhiều lần trong DevTools mới ra được hiệu ứng ưng ý. Công cụ CSS Gradient Generator cho bạn kéo thả trực quan, xem kết quả ngay lập tức, rồi lấy đúng đoạn CSS hoặc class Tailwind để dán thẳng vào dự án.
Bạn làm được gì với công cụ này?
Ba kiểu gradient thông dụng
Linear chạy theo đường thẳng, radial toả tròn từ tâm, conic xoay vòng như bánh xe màu. Chuyển đổi qua lại chỉ bằng một cú click để tìm đúng hiệu ứng cần dùng.
Tuỳ chỉnh từng color stop
Thêm bao nhiêu màu tuỳ thích, kéo góc, vị trí và độ mờ riêng cho từng điểm dừng màu. Preview cập nhật ngay khi bạn kéo thanh trượt, không cần bấm nút áp dụng.
Preset dựng sẵn
Sunset, Ocean, Forest, Rainbow, Neon... hàng loạt bảng màu đẹp có sẵn để áp dụng ngay, rồi chỉnh sửa tiếp theo ý mình thay vì bắt đầu từ con số 0.
Copy CSS & Tailwind
Xuất sẵn cả CSS thuần lẫn class Tailwind (from/via/to hoặc arbitrary value khi gradient phức tạp), copy một chạm rồi dán thẳng vào code.
Xem trước tức thì, không cần lưu hay đăng nhập
Mọi thao tác kéo màu, chỉnh góc hay đổi preset đều xử lý ngay trong trình duyệt, không gửi dữ liệu lên máy chủ nào. Bạn có thể thử nghiệm thoải mái, tạo bao nhiêu gradient tuỳ thích mà không lo mất công đăng ký hay chờ tải trang.
Câu hỏi thường gặp
Linear, radial và conic gradient khác nhau ở điểm nào?+
Linear gradient chuyển màu theo một đường thẳng với góc bạn tự chọn, hợp làm nền banner hay nút bấm. Radial gradient toả từ tâm ra ngoài theo hình tròn, thường dùng cho hiệu ứng ánh sáng hoặc spotlight. Conic gradient xoay quanh tâm như kim đồng hồ, phù hợp làm vòng tròn tiến trình hay hiệu ứng cầu vồng.
Làm sao thêm nhiều màu vào một gradient?+
Bấm nút "Thêm" ở mục Color Stops để chèn thêm một điểm dừng màu mới, công cụ tự tìm khoảng trống lớn nhất giữa các màu hiện có để đặt vào. Sau đó bạn chỉnh màu, vị trí và độ mờ riêng cho từng điểm, không giới hạn số lượng màu tối đa.
Class Tailwind xuất ra có dùng được ngay không?+
Với gradient linear 2-3 màu và không có opacity, công cụ xuất thẳng các class chuẩn như bg-gradient-to-r, from-..., via-..., to-... dùng được ngay. Với gradient radial, conic, nhiều hơn 3 màu hoặc có opacity, công cụ chuyển sang arbitrary value dạng bg-[...] để vẫn giữ đúng hiệu ứng hiển thị.
Gradient tạo ra có tương thích với mọi trình duyệt không?+
CSS gradient được hỗ trợ rộng rãi trên các trình duyệt hiện đại như Chrome, Firefox, Safari, Edge. Riêng conic-gradient cần phiên bản trình duyệt tương đối mới, nên nếu cần hỗ trợ các trình duyệt rất cũ, ưu tiên dùng linear hoặc radial gradient để đảm bảo hiển thị đúng ở mọi nơi.
