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íBrowser tool
Gradient generator
Create CSS gradients, preview them live, and export a PNG locally in your browser.
background-image: linear-gradient(90deg, rgba(255, 56, 56, 1) 0%, rgba(124, 58, 237, 1) 100%);Starter palettes
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.
Đặ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.
After this task
After this free tool, open Ai Enhance for the next AI editing workflow.
Continue with Ai EnhanceThô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.
Chuyển đổi màu giữa các định dạng có tên HEX, RGB, HSL, HSB, CMYK và CSS. Xem bản xem trước trực tiếp, sao chép bất kỳ giá trị nào và xuất thẻ màu.
Chuyển đổi mã màu HEX sang giá trị RGB và ngược lại. Xem trước trực tiếp, sao chép bằng một cú nhấp chuột và xuất đoạn mã CSS. - hoạt động trong trình duyệt của bạn.
Chọn bất kỳ màu nào từ hình ảnh đã tải lên và nhận mã HEX, RGB và HSL ngay lập tức. Xây dựng bảng màu từ ảnh để thiết kế web, xây dựng thương hiệu và minh họa.
Tải ảnh lên và trích xuất 5-10 màu chủ đạo bằng mã HEX, RGB và HSL. Sao chép các mẫu màu, xuất dưới dạng biến ASE hoặc CSS.
Tạo mã QR cho URL, văn bản, thông tin xác thực WiFi và vCard. Tùy chỉnh màu sắc, thêm logo ở giữa và tải xuống dưới dạng PNG hoặc SVG.
Tính toán chiều rộng, chiều cao hoặc tỷ lệ khung hình cho hình ảnh và video. Nhập hai giá trị bất kỳ và nhận giá trị thứ ba. Tỷ lệ đặt trước cho phương tiện truyền thông xã hội, phim và in ấn.