Tạo gradient CSS
Chọn tuyến tính, toả tròn hoặc xoay vòng, kéo các điểm màu và sao chép CSS ngay. Tải PNG 1920×1080 làm hình nền.
Mẫu có sẵn
Kiểu chuyển màu
Điểm màu 2/8
Xem nhanh cách dùng
Câu hỏi thường gặp
Cách tạo gradient CSS online?
Chọn kiểu tuyến tính, toả tròn hoặc xoay vòng, thêm và kéo các điểm màu trên thanh, chỉnh góc bằng thanh trượt. Mã CSS cập nhật ngay để bạn sao chép.
Linear, radial và conic gradient khác nhau thế nào?
Linear chuyển màu theo một đường thẳng, radial toả ra từ tâm thành hình tròn, conic xoay quanh tâm như chiếc quạt. Công cụ gọi chúng là Tuyến tính, Toả tròn và Xoay vòng.
Thêm được bao nhiêu màu vào gradient?
Tối đa 8 điểm màu. Bấm lên thanh màu hoặc nút Thêm màu để thêm, kéo để đổi vị trí và nhập số phần trăm để đặt vị trí chính xác.
Có tải gradient về làm hình nền được không?
Có, bấm Tải PNG để lưu ảnh 1920×1080 dùng làm hình nền, nền slide hay ảnh bìa. Nếu bạn đăng nhập, file tải về được lưu vào mục Lịch sử riêng của bạn và tự xoá sau 180 ngày.
CSS gradient có chạy trên mọi trình duyệt không?
linear-gradient và radial-gradient chạy trên mọi trình duyệt hiện đại. conic-gradient chạy trên Chrome, Safari, Firefox và Edge bản mới.
Vì sao mã CSS có thêm một dòng màu đơn?
Đó là màu nền dự phòng cho trình duyệt rất cũ không hiểu gradient, giúp giao diện vẫn có màu thay vì trắng trơn.
Có mẫu gradient đẹp sẵn không?
Có, phần Mẫu có sẵn gồm nhiều dải màu phổ biến để bạn bấm dùng ngay rồi chỉnh tiếp. Nút Ngẫu nhiên cũng giúp bạn tìm ý tưởng nhanh.
Làm sao để gradient trông mượt, không bị bẩn màu?
Tránh ghép hai màu đối diện trên bánh xe màu vì vùng giữa dễ xỉn; thêm một điểm màu trung gian tươi hơn ở giữa, hoặc chọn các màu gần nhau.
Dùng gradient trong Figma thế nào?
Tạo Fill kiểu Linear hoặc Radial trong Figma rồi nhập các mã màu và vị trí giống trong công cụ. Hoặc tải ảnh PNG và đặt làm nền.
Ảnh gradient có dùng thương mại được không?
Được, gradient do bạn tự tạo nên bạn được tự do sử dụng cho dự án cá nhân và thương mại.
Tạo gradient có cần đăng nhập không?
Không cần. Công cụ miễn phí và chạy ngay trên trình duyệt máy tính hoặc điện thoại.
Gradient có làm website chậm không?
Không, gradient CSS được trình duyệt vẽ trực tiếp nên nhẹ hơn nhiều so với dùng ảnh nền.
Gradient tôi tạo có được ghi lại không?
Gradient được tạo ngay trên trình duyệt của bạn. ColorME ghi nhận lượt dùng kèm đoạn mã CSS của gradient (màu, vị trí, góc) khi bạn tạo, sao chép hoặc tải PNG để thống kê, không kèm file ảnh.
Công cụ cùng nhóm
Tất cả công cụ
Hút màu ở bất kỳ đâu, ra HEX, RGB, HSL, CMYKLấy màu trên màn hình
HEX, RGB, HSL, CMYK, OKLCH qua lạiĐổi mã màu
Chữ trên nền có đạt chuẩn WCAG khôngKiểm tra tương phản
Lấy dải màu gradient từ chính bức ảnhTạo gradient từ ảnh
Tạo dải 50–950 từ 1 màu, xuất CSS, TailwindThang màu & design token
Xem thiết kế qua mắt người mù màuMô phỏng mù màu
Độ rộng cột, gutter, lề cho layoutTính lưới cột