Tạo gradient CSS
Tạo dải màu một cách trực quan, rồi sao chép CSS chạy được trên mọi trình duyệt hiện đại.
Đã niêm phong trên thiết bị này
Chạy ngay trong trình duyệt. Không có gì được tải lên.
Đã niêm phong
Xem trước
Điểm màu
Kéo các điểm màu, hoặc chọn một điểm và dùng phím mũi tên. Nhấp vào thanh để thêm điểm màu.
Cài đặt
OKLCH và OKLab tránh vùng xám xỉn ở giữa một số gradient. Code có kèm một phiên bản tiêu chuẩn cho trình duyệt cũ.
Code CSS
Cách hoạt động
-
Chọn kiểu
Chọn gradient tuyến tính, tỏa tròn hoặc hình nón, hoặc bắt đầu từ một mẫu có sẵn, rồi đặt góc hoặc tâm.
-
Chỉnh màu
Kéo các điểm màu dọc theo thanh, nhấp vào thanh để thêm điểm, và đổi màu cũng như vị trí của từng điểm.
-
Sao chép CSS
Sao chép code đã tạo và dán vào stylesheet của bạn làm nền (background).
Câu hỏi thường gặp
Gradient tuyến tính, tỏa tròn và hình nón khác nhau thế nào?
Gradient tuyến tính đổi màu dọc theo một đường thẳng ở góc bạn chọn. Gradient tỏa tròn lan ra từ một điểm tâm theo hình tròn hoặc elip. Gradient hình nón quét quanh một điểm tâm, giống như kim đồng hồ, rất tiện cho vòng tròn màu và biểu đồ tròn.
CSS được tạo có chạy trên mọi trình duyệt không?
Gradient tuyến tính, tỏa tròn và hình nón chạy trên mọi trình duyệt hiện nay. Khi bạn chọn cách hòa màu OKLCH hoặc OKLab, code còn có thêm một dòng tiêu chuẩn đặt trước, nên trình duyệt cũ vẫn hiển thị được gradient.
Tại sao gradient của tôi bị xám ở giữa?
Hòa hai màu rất khác nhau trong không gian sRGB tiêu chuẩn thường đi qua một vùng xám đục. Hãy đổi cách hòa màu sang OKLCH hoặc OKLab: màu được trộn theo cách mắt người cảm nhận, nên phần giữa vẫn tươi sáng.
Tôi có thể dùng màu trong suốt không?
Có. Gõ một màu có độ trong suốt, như rgb(52 66 217 / 0.4) hoặc #3442d966, vào ô màu của một điểm. Rất phù hợp để làm lớp phủ lên ảnh.
Tôi có thể thêm bao nhiêu điểm màu?
Bao nhiêu tùy bạn cần. Mỗi điểm có thể di chuyển bằng chuột, cảm ứng hoặc phím mũi tên, và xóa được miễn là vẫn còn hai điểm.