Xem trước
CSS Gradient Generator giúp bạn tạo linear, radial và conic gradient trực quan với nhiều color stops. Chỉnh màu, vị trí stop, góc rồi copy ngay CSS để dùng trong dự án.
Trực quan, nhanh chóng
Xem ngay kết quả gradient khi chỉnh màu và góc, không cần viết CSS thủ công.
Hỗ trợ nhiều loại
Linear, radial và conic gradient đều được hỗ trợ đầy đủ.
Nhiều color stops
Thêm nhiều điểm màu và tùy chỉnh vị trí từng stop.
Copy CSS ngay
Một click để copy CSS gradient đã tối ưu cho cross-browser.
01
Chọn loại gradient
Chọn Linear, Radial hoặc Conic gradient.
02
Thêm color stops
Chọn màu và vị trí (%) cho từng color stop.
03
Điều chỉnh góc
Kéo slider để chỉnh góc của linear/conic gradient.
04
Export CSS
Copy CSS hoặc export để dùng ngay trong code.
Linear Gradient
Gradient theo đường thẳng với góc tùy chỉnh. Phổ biến nhất, dùng cho background, header, button.
Radial Gradient
Gradient tỏa từ tâm ra ngoài, tạo hiệu ứng ánh sáng hoặc spotlight.
Conic Gradient
Gradient xoay quanh một điểm, tạo hiệu ứng pie chart hoặc color wheel.
Designer
Thử nghiệm nhanh các gradient trước khi apply vào design system.
Developer
Lấy CSS chính xác, cross-browser mà không cần tra cứu syntax.
No-code
Tạo gradient đẹp mà không cần biết viết CSS.