Tạo gradient

Thiết kế gradient tuyến tính, xuyên tâm và hình nón rồi xuất CSS hoặc ảnh

Tệp không rời khỏi thiết bị của bạn
Chạy trên trình duyệt
Miễn phí, không cần đăng ký, không hình mờ

Color stops

Click the bar to add a stop. Drag handles to move them; arrow keys nudge, Delete removes.

Code

background: linear-gradient(135deg, #4f46e5 0%, #5d45e5 3.13%, #6a44e5 6.25%, #7643e3 9.38%, #8243e1 12.5%, #8d42de 15.63%, #9742db 18.75%, #a141d6 21.88%, #ab41d1 25%, #b541cc 28.13%, #be42c6 31.25%, #c642bf 34.38%, #cf42b8 37.5%, #d743b1 40.63%, #de44a9 43.75%, #e546a1 46.88%, #ec4899 50%, #f14b90 53.13%, #f54e87 56.25%, #f8527e 59.38%, #fb5775 62.5%, #fe5b6c 65.63%, #ff6063 68.75%, #ff665a 71.88%, #ff6c51 75%, #ff7247 78.13%, #ff783e 81.25%, #ff7e35 84.38%, #ff842b 87.5%, #fd8b21 90.63%, #fb9118 93.75%, #f89810 96.88%, #f59e0b 100%);
background: linear-gradient(in oklch 135deg, #4f46e5 0%, #ec4899 50%, #f59e0b 100%);

The first line is a fallback with precomputed stops for browsers without “in oklab/oklch” support.

Cách dùng Tạo gradient

Dựng gradient tuyến tính, xuyên tâm và hình nón với bao nhiêu điểm dừng màu tùy ý, pha trong sRGB, OKLab hoặc OKLCH. Sao chép kết quả thành CSS, lớp Tailwind hoặc SVG, hoặc tải thành ảnh PNG, JPG hoặc WebP tối đa 8192 px mỗi cạnh.

1
Chọn “Loại” (Tuyến tính, Xuyên tâm hoặc Hình nón) và đặt “Góc”, “Hình” hoặc tâm; với xuyên tâm và hình nón bạn có thể kéo trên bản xem trước để dịch tâm.
2
Sửa “Điểm dừng màu”: nhấn thanh để thêm điểm, kéo tay nắm để dịch, và đổi từng màu cùng vị trí trong danh sách.
3
Chọn cách “Pha màu trong” (sRGB, OKLab hoặc OKLCH), hoặc bắt đầu từ một “Mẫu sẵn” hoặc “Ngẫu nhiên”.
4
Sao chép mã từ tab CSS, Tailwind hoặc SVG.
5
Với ảnh, đặt “Chiều rộng” và “Chiều cao” hoặc chọn một cỡ, chọn PNG, JPG hoặc WebP, rồi nhấn “Tải về”.

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

Pha màu sRGB, OKLab và OKLCH khác nhau thế nào?

sRGB là cách pha CSS cổ điển, nơi các màu bổ sung có thể thành xám ở giữa. OKLab đều về cảm nhận, không có điểm giữa đục. OKLCH giữ màu rực bằng cách đi quanh vòng sắc.

Gradient OKLab và OKLCH có chạy trên trình duyệt cũ không?

Đầu ra CSS bắt đầu bằng một dòng dự phòng dùng các điểm dừng đã tính sẵn cho trình duyệt không hỗ trợ “in oklab” hoặc “in oklch”. Mã SVG và ảnh tải về cũng dùng điểm dừng đã tính sẵn, nên trông giống nhau ở mọi nơi.

Vì sao tab SVG bị tắt với gradient hình nón?

SVG không có gradient hình nón. Hãy tải ảnh PNG, JPG hoặc WebP.

Tôi có dùng điểm dừng trong suốt được không?

Có, màu có alpha như rgba() hoặc #rrggbbaa đều được. Tải PNG hoặc WebP để giữ độ trong suốt, vì JPG không có kênh alpha.

Ảnh có được tạo trên máy chủ không?

Không. Ảnh được vẽ trên canvas trong trình duyệt và lưu trực tiếp, ở mọi cỡ từ 1 đến 8192 px mỗi cạnh.

Làm sao tinh chỉnh một điểm dừng bằng bàn phím?

Tập trung vào tay nắm điểm dừng rồi dùng phím mũi tên để dịch 1% (Shift để 10%), Home hoặc End để nhảy tới hai đầu, và Delete để xóa. Một gradient luôn giữ ít nhất hai điểm dừng.