Trình tạo Gradient CSS

Trình tạo Gradient CSS là gì?

Trình tạo Gradient CSS là một công cụ miễn phí trong trình duyệt dành cho nhà thiết kế web và lập trình viên front-end muốn tạo gradient một cách trực quan thay vì viết cú pháp bằng tay. Chọn tuyến tính, hướng tâm hoặc nón — với biến thể lặp lại tùy chọn — rồi chỉnh sửa các điểm dừng màu trên thanh xem trước có thể kéo hoặc trong các hàng theo từng điểm dừng với ô màu HEX và vị trí. Gradient hướng tâm cung cấp hình tròn/elip, một từ khóa kích thước (closest-side, closest-corner, farthest-side, farthest-corner) và tâm at X% Y%, còn gradient nón nhận một góc bắt đầu và tâm. Bạn có thể xếp chồng nhiều lớp gradient vào một nền ngăn cách bằng dấu phẩy, tạo gradient ngẫu nhiên, áp dụng các bảng màu dựng sẵn, xoay sắc độ của từng điểm dừng, và sao chép quy tắc background sẵn sàng dán.

Cách sử dụng Trình tạo Gradient CSS

1. Chọn loại gradient — Tuyến tính, Hướng tâm hoặc Nón — và bật Lặp lại trong tùy chọn để có mẫu lặp lại.
2. Kéo các điểm dừng dọc theo thanh xem trước để đổi vị trí, nhấp vào chỗ trống trên thanh để thêm điểm dừng, hoặc nhấp đúp một điểm dừng để xóa.
3. Tinh chỉnh từng điểm dừng bằng ô màu HEX và vị trí của nó, hoặc dùng ống hút màu (nơi được hỗ trợ) để lấy một màu từ màn hình.
4. Với gradient hướng tâm, đặt hình dạng (tròn hoặc elip), một từ khóa kích thước và tâm X/Y; với nón, đặt góc bắt đầu và tâm.
5. Thêm nhiều lớp để xếp chồng gradient vào một nền, thử Ngẫu nhiên, áp dụng một bảng màu, hoặc xoay tất cả sắc độ cùng lúc.
6. Sao chép quy tắc CSS background đã tạo và dán vào stylesheet của bạn.

Ví dụ

Tuyến tính, 90deg, #4f86f7 tại 0% và #9333ea tại 100%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%);

Hướng tâm, ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%

background: radial-gradient(ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%);

Lớp 1 tuyến tính 90deg; Lớp 2 hướng tâm circle at 50% 50%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%), radial-gradient(circle farthest-corner at 50% 50%, #ffffff88 0%, #ffffff00 100%);

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

Những loại gradient và tùy chọn nào được hỗ trợ?

Gradient tuyến tính, hướng tâm và nón, mỗi loại có biến thể lặp lại tùy chọn. Hướng tâm thêm hình tròn/elip, một từ khóa kích thước (closest-side, closest-corner, farthest-side, farthest-corner) và tâm at X% Y%; nón thêm góc bắt đầu và tâm. Bạn cũng có thể xếp chồng nhiều lớp vào một nền.

Thanh điểm dừng có thể kéo hoạt động thế nào?

Kéo bất kỳ điểm dừng nào dọc theo thanh để đổi vị trí, nhấp vào phần trống của thanh để chèn một điểm dừng mới với màu nội suy, và nhấp đúp một điểm dừng để xóa (giữ tối thiểu hai điểm). Mỗi điểm dừng cũng có ô màu HEX và vị trí bên dưới thanh.

Tôi có thể lấy màu từ màn hình không?

Có, trên các trình duyệt hỗ trợ EyeDropper API. Khi khả dụng, một nút ống hút màu xuất hiện bên cạnh mỗi điểm dừng; nhấp vào và chọn bất kỳ điểm ảnh nào trên màn hình. Bạn luôn có thể gõ giá trị HEX hoặc dùng ô màu gốc.

Ngẫu nhiên, bảng màu và xoay sắc độ làm gì?

Ngẫu nhiên thay lớp đang hoạt động bằng một gradient ngẫu nhiên mới, các bảng màu đổi điểm dừng của lớp đang hoạt động sang một bộ màu tuyển chọn, và Xoay sắc độ dịch chuyển sắc độ của mọi điểm dừng trong mọi lớp cùng lúc. Chúng chỉ thay đổi gradient khi bạn nhấp.

Màu sắc hoặc CSS của tôi có được tải lên đâu đó không?

Không. Gradient được dựng hoàn toàn trong trình duyệt của bạn bằng các phép tính chuỗi và màu cục bộ — không có màu sắc, CSS hay cài đặt nào từng được gửi đến máy chủ, nên nó hoạt động ngoại tuyến và giữ riêng tư công việc của bạn.