Thiết kế độ dốc đẹp và xuất dưới dạng CSS hoặc hình ảnh
Chọn màu, thêm điểm dừng và điều chỉnh góc hoặc điểm trung tâm để tạo độ chuyển màu chính xác mà bạn cần. Công cụ này hỗ trợ các gradient tuyến tính, xuyên tâm và hình nón với các điểm dừng màu không giới hạn. Sao chép mã CSS cho biểu định kiểu của bạn hoặc tải xuống gradient dưới dạng PNG có độ phân giải cao để sử dụng trong các dự án thiết kế.
Sử dụng công cụ này miễn phíĐặc trưng
Ba loại gradient
Tạo các gradient tuyến tính với bất kỳ góc nào, các gradient xuyên tâm với tâm và hình dạng có thể điều chỉnh hoặc các gradient hình nón quét quanh một điểm. Chuyển đổi giữa các loại và cập nhật bản xem trước ngay lập tức.
Điểm dừng màu không giới hạn
Thêm bao nhiêu điểm dừng màu tùy thích dọc theo thanh chuyển màu. Kéo các điểm dừng để định vị lại chúng, nhấp đúp để thay đổi màu hoặc nhấp chuột phải để xóa. Mỗi điểm dừng hỗ trợ độ mờ cho độ dốc bán trong suốt.
Đầu ra mã CSS
Công cụ này tạo mã hình nền CSS hợp lệ với tiền tố của nhà cung cấp. Sao chép mã và dán trực tiếp vào biểu định kiểu của bạn. Đầu ra cập nhật theo thời gian thực khi bạn chỉnh sửa độ dốc.
Xuất hình ảnh PNG
Tải xuống gradient dưới dạng PNG ở bất kỳ độ phân giải nào — từ hình thu nhỏ 100 px đến biểu ngữ 4000 px. Sử dụng hình ảnh làm nền, lớp phủ hoặc thành phần thiết kế trong các công cụ không hỗ trợ chuyển màu CSS.
Cách sử dụng
Chọn loại độ dốc
Chọn tuyến tính, xuyên tâm hoặc hình nón. Đối với tuyến tính, đặt góc; đối với hướng tâm, đặt điểm trung tâm và hình dạng.
Thêm và điều chỉnh màu sắc
Nhấp vào thanh chuyển màu để thêm các điểm dừng màu. Kéo để định vị lại, nhấp đúp để thay đổi màu và điều chỉnh độ mờ cho từng điểm dừng.
Sao chép CSS hoặc tải xuống
Sao chép mã CSS đã tạo để sử dụng trên web hoặc đặt độ phân giải và tải xuống gradient dưới dạng hình ảnh PNG.
Thông số kỹ thuật
| Các loại chuyển màu | Tuyến tính, xuyên tâm, hình nón |
| Điểm dừng màu | Không giới hạn |
| Phạm vi góc | 0–360° |
| Đầu ra CSS | Tiền tố tiêu chuẩn + nhà cung cấp |
| Xuất PNG | Lên tới 4000 × 4000 px |
| Xử lý | Phía khách hàng (tức thì) |
Related Magic Eraser Tools
Câu hỏi thường gặp
Tôi có thể tạo gradient có độ trong suốt không?
+
Đúng. Mỗi điểm dừng màu có một thanh trượt độ mờ. Đặt độ mờ dưới 100% để tạo các vùng bán trong suốt theo dải màu. Đầu ra CSS sử dụng các giá trị rgba và xuất PNG giữ nguyên kênh alpha.
Độ dốc hình nón là gì?
+
Màu chuyển sắc hình nón tỏa ra dừng xung quanh một điểm trung tâm, giống như chuyển động quét của kim đồng hồ. Nó rất hữu ích cho các hiệu ứng kiểu biểu đồ hình tròn, bánh xe màu và hình nền trang trí. Hỗ trợ trình duyệt là tuyệt vời trong các trình duyệt hiện đại.
Tôi có thể sử dụng CSS được tạo trong bất kỳ khung nào không?
+
Đúng. Đầu ra là CSS tiêu chuẩn hoạt động ở HTML đơn giản, React, Vue, Tailwind và bất kỳ khung nào khác hỗ trợ CSS nội tuyến hoặc dựa trên biểu định kiểu.
Cần một gradient trên một bức ảnh?
AI Enhance có thể điều chỉnh tông màu và ánh sáng cho ảnh của bạn và Công cụ lớp phủ hình ảnh của chúng tôi cho phép bạn trộn màu chuyển màu lên trên bất kỳ hình ảnh nào để có giao diện bóng bẩy.
Dùng thử miễn phíMore free tools
Explore our other limited free edits after sign-in photo and image tools.
Thay đổi kích thước hình ảnh theo kích thước pixel chính xác cho phương tiện truyền thông xã hội, web và in ấn. Không cần đăng ký. Hỗ trợ JPEG, PNG và WebP lên tới 50 MB.
Nén hình ảnh JPEG, PNG và WebP lên tới 80% với mức giảm chất lượng hiển thị ở mức tối thiểu. Điều chỉnh thanh trượt chất lượng để kiểm soát hoàn toàn. Không cần đăng ký.
Chuyển đổi hình ảnh PNG sang định dạng JPEG ngay lập tức. Điều chỉnh chất lượng đầu ra, chọn màu nền cho vùng trong suốt và tải xuống - không cần đăng ký.
Chuyển đổi hình ảnh JPEG sang định dạng PNG để có chất lượng không bị mất và hỗ trợ độ trong suốt. Lý tưởng trước khi loại bỏ nền. Không cần đăng ký hoặc cài đặt.
Chuyển đổi ảnh Apple HEIC và HEIF sang định dạng JPEG tương thích phổ biến. Hoạt động trên trình duyệt — không cần cài đặt ứng dụng, không cần đăng ký, không cần tải tệp lên máy chủ.
Chuyển đổi JPEG và PNG sang WebP để tải trang nhanh hơn hoặc chuyển đổi WebP trở lại JPEG/PNG để tương thích. Không cần đăng ký, không cần cài đặt, chạy trong trình duyệt.