Tạo gradient CSS
Chọn kiểu và màu — gradient CSS gọn, sẵn sàng sao chép, cập nhật trực tiếp kèm phần xem trước.
Xem trước
Cách sử dụng
- Gradient đã có trên màn hình khi trang mở — kết quả đầu tiên không cần nhấp gì.
- Chọn kiểu: “Linear” chạy theo một góc, “Radial” lan từ một hình tròn, “Conic” quét quanh một tâm. Đổi góc bằng thanh trượt với kiểu linear và conic.
- Đặt màu bằng các ô màu và kéo từng vị trí (0–100%). Thêm màu bằng “+ Thêm màu” nếu muốn gradient nhiều điểm; xóa bớt còn tối thiểu hai.
- CSS cập nhật trực tiếp bên dưới — sao chép chỉ với một cú nhấp và dán vào bất kỳ đâu nhận CSS.
Ví dụ
Cài đặt
Linear · 90° · #FF5733 @0% → #33A1FF @100%
CSS
linear-gradient(90deg, #FF5733 0%, #33A1FF 100%)
Đây là gradient tuyến tính chuẩn từ #FF5733 bên trái sang #33A1FF bên phải; 90deg nghĩa là “sang phải”. Kiểu “Radial” cho radial-gradient(circle, #FF5733 0%, #33A1FF 100%), và “Conic” cho conic-gradient(from 90deg, #FF5733 0%, #33A1FF 100%). Mọi thứ là ASCII thuần và dán vào bất kỳ CSS nào mà không cần sửa.
Phạm vi, giới hạn và câu hỏi thường gặp
- Chỉ màu đục: các ô màu là bộ chọn màu của trình duyệt và không có alpha. Cần độ trong suốt, hãy chuyển màu sang dạng alpha trước rồi quay lại.
- Chỉ một đoạn chuẩn: linear, radial hoặc conic — không tiền tố -webkit-, không mẹo nhiều lớp/nhiều nền, không đặt kích thước radial hay vị trí tâm.
- Các điểm màu giữ thứ tự bạn thêm — không tự sắp xếp, nên vị trí sai thứ tự sẽ tạo bước nhảy cứng theo đúng ý bạn.
- Từ 2 đến 8 điểm màu. Giảm còn một điểm sẽ dừng gradient (kèm thông báo) thay vì tạo ra một gradient giả.
- Không thư viện preset, không áp nền toàn trang, không liên kết chia sẻ mang gradient — nút chia sẻ chỉ chia sẻ URL trang; không tải lên, không lưu trữ, không ghi vào URL.
- Góc không có ý nghĩa với gradient radial, nên điều khiển góc bị ẩn và mã tạo ra không có góc.
Công cụ liên quan
Những gì người dùng thường cần tiếp theo khi đã có gradient.