Trình tạo nền chuyển sắc trực tuyến

Xem trước hiệu ứng gradient CSS theo thời gian thực, hỗ trợ gradient tuyến tính, xuyên tâm và hình nón, tạo mã và xuất hình ảnh chỉ với một cú nhấp chuột

Báo lỗi

Chế độ chạy trên trình duyệt: Dữ liệu của bạn được xử lý trong trình duyệt và không được tải lên máy chủ.

Tốc độ và ổn định: Tốc độ xử lý phụ thuộc vào thiết bị và trình duyệt. Với tác vụ hàng loạt lớn, phiên bản desktop có thể ổn định hơn.

Đang tải công cụ, vui lòng chờ...

Nếu công cụ trực tuyến không tải hoặc chạy được, hãy thử công cụ máy tính. https://tools.yikeaigc.com/

Mức sử dụng công cụ

Quay lại phiên bản cũ

Thiết lập chuyển sắc trước, rồi sao chép mã hoặc xuất ảnh. Hỗ trợ chuyển sắc tuyến tính, xuyên tâm, hình nón, lặp lại và nhiều điểm màu; thay đổi tham số sẽ đồng bộ với xem trước bên phải.

Thiết lập chuyển sắc

Chọn kiểu chuyển sắc trước, rồi chỉnh hướng và điểm màu. Nên sắp xếp điểm màu từ nhỏ đến lớn.

Kiểu chuyển sắcChuyển sắc hình nón phù hợp cho bảng màu góc và nền vòng

Hướng & hình dạngChuyển sắc tuyến tính có thể dùng góc hoặc hướng nhanh

Góc tuyến tính90°

Chu kỳ lặp32%

Hình dạng xuyên tâm

Phạm vi khuếch tán

Chu kỳ lặp32%

Tâm X50%

Tâm Y50%

Góc bắt đầu0°

Tâm X50%

Tâm Y50%

Lặp gradient Lớp ánh sáng mềm Tối góc Vân mịn

Nút màuHỗ trợ 2-10 nút, có thể đặt độ trong suốt và vị trí

Mẫu ví dụCó thể dùng làm điểm bắt đầu phối màu

Xuất mã

Sau khi xác nhận bản xem trước, bạn có thể sao chép CSS hoặc xuất PNG, JPG, SVG, tệp CSS và gói tài nguyên.

Định dạng mãChọn cách khai báo theo tình huống phát triển

Chế độ mã

Tên lớp / tên biến

Bao gồm màu nền dự phòng Nén mã

Mã CSS

Kích thước ảnhKích thước tùy chỉnh dùng để xuất ảnh và SVG

Mẫu kích thước

Chất lượng JPG92%

Rộng(px)

Cao(px)

Tải tài nguyênGói gồm CSS, SVG, PNG và JSON cài đặt

Xem trước trực tiếp

Gradient Preview Cập nhật ngay khi đổi tham số

LoạiTuyến tính

Nút màu2

Kích thước xuất1920x1080

Độ dài mã0

Hướng dẫn

Hướng dẫn sử dụng phần mềm

Thiết lập loại gradient:Chọn gradient tuyến tính, gradient xuyên tâm hoặc gradient hình nón. Tuyến tính phù hợp với banner và nền trang web, xuyên tâm phù hợp với hiệu ứng lan tỏa từ trung tâm, hình nón phù hợp với vòng tròn, bảng màu và họa tiết trang trí.
Điều chỉnh hướng và hình dạng:
- Gradient tuyến tính:Có thể dùng nút hướng, hoặc thiết lập hướng 0-360 độ bằng thanh trượt góc.
- Gradient xuyên tâm:Có thể thiết lập hình tròn hoặc hình elip, phạm vi lan tỏa, vị trí tâm X/Y.
- Gradient hình nón:Có thể thiết lập góc bắt đầu và vị trí tâm.
Cấu hình các điểm màu:Sử dụng bộ chọn màu, ô nhập HEX, phần trăm vị trí và tham số độ trong suốt để kiểm soát từng điểm màu. Có thể thêm, xóa, sắp xếp, đảo ngược màu và phân bố đều các điểm chỉ với một cú nhấp.
Sử dụng tùy chọn hiệu ứng:Có thể bật gradient lặp, lớp ánh sáng dịu, tối góc và vân mảnh để nền phù hợp hơn với màn hình đầu trang web, thẻ, poster và tài nguyên thiết kế.
Sao chép và xuất:Trong “Xuất mã”, chọn tên lớp CSS, chỉ khai báo hoặc chế độ biến CSS; có thể sao chép mã CSS, hoặc xuất các tệp PNG, JPG, SVG, CSS và gói tài nguyên ZIP.
Lưu và chia sẻ:Trong “Lưu chia sẻ”, lưu thiết lập hiện tại, tạo liên kết chia sẻ, hoặc dán mã gradient CSS có sẵn vào công cụ để tiếp tục chỉnh sửa.

Câu hỏi thường gặp

Đáp:Gradient tuyến tínhchuyển tiếp theo hướng đường thẳng, phù hợp với nền trang web, nút và banner;Gradient xuyên tâmlan tỏa từ điểm trung tâm ra ngoài, phù hợp với hiệu ứng ánh sáng tập trung và nền có chiều sâu;Gradient hình nónxoay quanh trung tâm, phù hợp với bảng màu, vòng tròn và hiệu ứng trang trí.

Đáp: Nhấp “Thêm màu” để thêm điểm màu, sau đó lần lượt thiết lập màu, phần trăm vị trí và độ trong suốt. Vị trí điểm sẽ ảnh hưởng đến phạm vi chuyển tiếp màu; cũng có thể dùng “Phân bố đều” để nhanh chóng sắp xếp các điểm.

Đáp: Gradient lặp phù hợp để tạo các nền có quy luật như sọc, gợn sóng, họa tiết vòng lặp lại. Gradient tuyến tính và xuyên tâm có thể bật chế độ lặp, còn gradient hình nón nên kiểm soát hiệu ứng thông qua các điểm màu và góc.

Đáp: Có thể xuất tệp PNG, JPG, SVG, CSS, cũng có thể tải xuống gói tài nguyên ZIP. Gói tài nguyên bao gồm mã CSS, tệp SVG, ảnh PNG và JSON cài đặt, thuận tiện cho việc lưu trữ và chỉnh sửa lại.

Đáp: Sau khi sao chép mã CSS đã tạo, chỉ cần dán vào tệp kiểu của trang web. Công cụ cung cấp ba chế độ: tên lớp CSS, chỉ khai báo và biến CSS, có thể chọn theo thói quen của dự án.

Đáp: Có. Dán mã linear-gradient, radial-gradient hoặc conic-gradient vào khu vực “Nhập CSS” trong “Lưu chia sẻ”, sau đó nhấp “Đọc vào công cụ” để tiếp tục điều chỉnh màu sắc, góc và vị trí.

Đáp: Không. Việc tạo gradient, sao chép mã, vẽ ảnh và đóng gói tài nguyên đều được thực hiện cục bộ, không cần tải nội dung thiết kế lên máy chủ.