Tạo gradient CSS

Tạo gradient CSS

Tạo nền gradient (màu chuyển sắc) bằng mắt thay vì thử đi thử lại. Kéo các điểm màu dọc theo thanh, đổi góc hoặc tâm, rồi sao chép đoạn mã chạy được trên mọi trình duyệt hiện đại.

Chạy trong trình duyệt — không có dữ liệu nào bạn nhập bị tải lên

Điểm màu

Nhấn vào thanh để thêm điểm màu, kéo điểm màu để di chuyển, hoặc chọn một điểm và dùng phím mũi tên. Phím Delete xóa điểm màu đang chọn.

Điểm màu đang chọn

Màu

Vị trí (%)

Kiểu

Góc

135°

Lặp lại

CSS

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Tailwind

bg-[linear-gradient(135deg,#667eea_0%,#764ba2_100%)]

Cách sử dụng

Bắt đầu từ một mẫu có sẵn hoặc gradient mặc định.
Nhấn vào thanh để thêm màu; kéo các điểm màu để di chuyển chúng.
Chọn Tuyến tính, Tỏa tròn hoặc Hình nón và chỉnh góc hoặc tâm.
Sao chép khai báo CSS hoặc class Tailwind.

Giải thích tùy chọn

Tuyến tính: Màu chuyển dần theo một đường thẳng. 0° hướng lên trên, 90° sang phải và 180° xuống dưới.
Tỏa tròn: Màu lan ra từ một điểm tâm theo hình tròn hoặc hình elip vừa với phần tử.
Hình nón: Màu quét quanh một điểm tâm như bánh xe màu hoặc biểu đồ tròn.
Lặp lại: Lặp lại hoa văn; đặt các điểm màu trong một khoảng ngắn, ví dụ từ 0% đến 10%, để tạo sọc.

Mã được tạo trông như thế nào

Cùng hai màu, được viết theo từng loại. Các điểm dừng luôn được viết với vị trí theo phần trăm:

linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%)
radial-gradient(ellipse at 50% 50%, #ff7e5f 0%, #feb47b 100%)
conic-gradient(from 0deg at 50% 50%, #ff7e5f 0%, #feb47b 100%)
repeating-linear-gradient(45deg, #000000 0%, #ffffff 10%)

Phiên bản Tailwind bọc cùng giá trị đó trong một lớp giá trị tùy ý. Dấu cách thành dấu gạch dưới và dấu cách sau dấu phẩy bị bỏ:

bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)]

Ở dòng CSS cuối, mẫu lặp lại cứ mỗi 10% của phần tử, cho ra các sọc mảnh. Với gradient hình nón, góc là nơi vòng quét bắt đầu, còn với gradient tỏa tròn, hai tỷ lệ phần trăm là tâm.

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

Những trình duyệt nào hỗ trợ các gradient này?

Gradient tuyến tính, tỏa tròn và hình nón đều chạy trên mọi phiên bản hiện hành của Chrome, Edge, Firefox và Safari, không cần tiền tố trình duyệt (vendor prefix).

Làm sao để tạo gradient trong suốt?

Nhập một màu có kênh alpha, ví dụ #00000000 cho màu đen hoàn toàn trong suốt, vào ô màu của một điểm màu.

Dùng class Tailwind như thế nào?

Thêm class vào danh sách class của phần tử trong Tailwind CSS 3 hoặc 4. Class dùng giá trị tùy ý (arbitrary value), nên không cần cấu hình gì thêm.

Quyền riêng tư

Công cụ này chạy hoàn toàn trong trình duyệt của bạn. Tệp và văn bản được xử lý ngay trên thiết bị và không bao giờ được tải lên máy chủ của chúng tôi.