Tạo CSS gradient (linear, radial, conic) với live preview — thêm color stops, điều chỉnh hướng/vị trí, copy CSS hoặc Tailwind
Gradient Type
Direction
Color Stops 2
Live Preview
CSS Output
background: linear-gradient(to right, #0ea5e9 0%, #6366f1 100%);
bg-[linear-gradient(to right, #0ea5e9 0%, #6366f1 100%)]
Preset Gradients
Điểm nổi bật
Các điểm đáng chú ý nhất của công cụ này để bạn nắm nhanh trước khi dùng.
Tạo linear gradient với la bàn góc xoay, radial gradient toả từ tâm, hoặc conic gradient dạng hình nón.
Thêm từ 2 đến 6 điểm màu với position tuỳ chỉnh để tạo chuyển sắc phức tạp và đẹp mắt.
Chọn từ 8 gradient được thiết kế sẵn làm điểm khởi đầu, sau đó tuỳ biến theo ý muốn.
Xuất gradient dưới dạng CSS thuần hoặc giá trị arbitrary value của Tailwind để dùng linh hoạt.
Cách sử dụng
Làm theo từng bước để dùng công cụ nhanh và đúng intent ngay từ lần đầu.
Chọn Linear, Radial hoặc Conic. Với linear, dùng la bàn tròn để điều chỉnh góc nghiêng trực quan.
Click vào từng ô màu để chọn màu, kéo thanh trượt để điều chỉnh vị trí của từng stop.
Nhấn "+" để thêm stop màu mới (tối đa 6), nhấn "x" trên stop để xoá.
Chọn định dạng CSS hoặc Tailwind rồi copy. Tailwind arbitrary value có dạng bg-[linear-gradient(...)].
Câu hỏi thường gặp
Những câu hỏi gặp nhiều nhất khi dùng công cụ, được trình bày ngắn gọn và dễ quét.