Trình tạo nền gradient động CSS

Tạo nền chuyển sắc động trực tuyến, hỗ trợ nhiều màu sắc, hướng hoạt ảnh và mẫu cài sẵn, tạo mã CSS 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ũ

Chọn bảng màu, chỉnh hoạt ảnh, rồi sao chép hoặc tải mã. Có thể dùng mẫu sẵn làm ví dụ hoặc chỉnh tiếp màu, điểm dừng, hướng, tốc độ và mục đích xuất. Mọi xem trước, tạo và lưu cài đặt đều thực hiện trên trang này.

Xem trước trực tiếp CSS Keyframes Chữ / Viền / Nền Có thể lưu cài đặt

Số màu-

Kiểu hoạt ảnh-

Thời lượng-

Mục đích xuất-

Cài đặt màu

Bắt đầu từ mẫu sẽ nhanh hơn. Điểm dừng màu ảnh hưởng nhịp chuyển sắc; nên giữ 2-6 màu.

Mẫu cấu hình Nhấp để ghi đè màu hiện tại

Cơ bản về gradient Tuyến tính hợp nền web, xuyên tâm hợp hiệu ứng spotlight, hình nón hợp viền hoặc huy hiệu

Kiểu chuyển sắc

Góc gradient135°

135°

Tâm xuyên tâm / hình nón

Điểm dừng màu Cần giữ 2 màu, có thể đặt tối đa 8 màu

Tham số hoạt ảnh

Nên dùng tốc độ chảy chậm làm nền trang. Khi cần giảm hiệu ứng, có thể bật mã tương thích giảm chuyển động.

Kiểu hoạt ảnh Chọn logic tạo Keyframes khác

Hướng chuyển động Ảnh hưởng đến keyframe của background-position

Tốc độ & vòng lặp Kích thước nền càng lớn, biên độ màu dịch chuyển càng rõ

Thời lượng hoạt ảnh10s

10s

Kích thước nền400%

400%

Đường cong hoạt ảnh

Lặp vô hạn Phát qua lại Tạm dừng khi hover Tương thích giảm chuyển động

Tạo và xuất

Sau khi đặt tên lớp và ngữ cảnh, sao chép CSS vào tệp style của dự án rồi thêm lớp tương ứng cho phần tử đích.

Cài đặt áp dụng Cùng một bảng màu có thể tạo hiệu ứng nền, chữ hoặc viền

Tên lớp CSS

Mục đích xuất

Chiều cao tối thiểu (px)

Bo góc (px)

Độ rộng viền (px)

Nền bên trong viền

Mã CSS đã tạo

HTML mẫu

Xem trước trực tiếp

Animated Gradient Sau khi chỉnh màu, hướng và tốc độ, hiệu ứng sẽ cập nhật ngay. Phù hợp cho màn hình đầu trang, khu vực nút, nền trang sự kiện và thẻ hình ảnh. CSS Ready

Kiểu chuyển sắc-

Hướng-

Kích thước-

Tên lớp-

Hướng dẫn

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

Chọn bảng phối màu: Trong “Cài đặt phối màu”, nhấp vào mẫu có sẵn hoặc thêm, xóa, điều chỉnh màu và điểm dừng theo cách thủ công.
Thiết lập kiểu chuyển sắc: Chọn chuyển sắc tuyến tính, xuyên tâm hoặc hình nón, đồng thời điều chỉnh góc và vị trí tâm theo nhu cầu.
Cấu hình thông số hoạt ảnh: Trong “Thông số hoạt ảnh”, thiết lập kiểu chuyển động, hướng di chuyển, thời lượng, kích thước nền, đường cong hoạt ảnh và chế độ lặp.
Chọn mục đích xuất: Trong “Tạo và xuất”, chọn vùng chứa nền, chữ chuyển sắc hoặc viền chuyển sắc, đồng thời thiết lập tên lớp CSS, bo góc, viền và các thông số khác.
Xem trước hiệu ứng: Bên phải có thể chuyển đổi giữa các chế độ xem trước nền, thẻ, chữ và viền; xác nhận hiệu ứng rồi mới tạo mã.
Sao chép hoặc tải mã: Nhấp vào “Sao chép CSS”, “Sao chép HTML” hoặc “Tải CSS” để áp dụng mã vào các phần tử trên trang.
Lưu cài đặt: Nhấp vào “Lưu cài đặt” để giữ lại các thông số hiện tại, thuận tiện cho lần chỉnh sửa tiếp theo.

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

Đáp: Sao chép mã CSS vào tệp kiểu, sau đó thêm tên lớp trong HTML mẫu vào phần tử cần hiển thị chuyển sắc là được.

Đáp: Chuyển sắc tuyến tính phù hợp với nền trang và banner; chuyển sắc xuyên tâm phù hợp với hiệu ứng ánh sáng tập trung và lan tỏa mềm; chuyển sắc hình nón phù hợp với viền, huy hiệu và hiệu ứng thị giác có cảm giác xoay.

Đáp: Bạn có thể tăng kích thước nền, tăng số lượng màu, điều chỉnh điểm dừng màu hoặc chọn các kiểu hoạt ảnh như chuyển động chéo, chuyển động nhịp thở.

Đáp: Có. Trong mục đích xuất, chọn “Chữ chuyển sắc”, công cụ sẽ tạo mã CSS chứa background-clip:text.

Trả lời: Nền trang thông thường có thể sử dụng bình thường. Nếu trang có nhiều hoạt ảnh, nên kéo dài thời gian hoạt ảnh, giảm số lượng màu và bật mã tương thích giảm hiệu ứng động.