Những điểm chính
- 01Cả ba loại gradient CSS — tuyến tính, xuyên tâm và hình nón — được hỗ trợ với xem trước trực tiếp.
- 02Thêm tối đa sáu điểm dừng màu, mỗi điểm có vị trí và màu độc lập.
- 03Đầu ra là một khai báo nền hoàn chỉnh sẵn sàng dán vào bất kỳ bảng kiểu nào.
- 04Không cần đăng ký, không cần cài đặt và không có gì được tải lên — mọi thứ chạy trong trình duyệt của bạn.
Tại Sao Sử Dụng Trình Tạo Gradient Trực Quan?
Viết gradient CSS bằng tay trở nên tẻ nhạt nhanh chóng. Cú pháp có thể đọc được khi bạn biết nó, nhưng chọn các vị trí dừng chính xác và màu mà không có xem trước trực quan chuyển một quyết định thiết kế đơn giản thành thử và sai trong DevTools. Một trình tạo cho phép bạn xem kết quả theo thời gian thực và xuất mã sạch ngay khi nó trông đúng.
Công cụ này hỗ trợ cả ba loại gradient hiện đại. Linear là sự pha trộn hướng cổ điển mà bạn sẽ sử dụng cho nền anh hùng và nút. Radial lan rộng từ một điểm — tuyệt vời cho các hiệu ứng chiếu sáng điểm và vignet. Conic quét xung quanh một tâm, làm cho nó trở thành lựa chọn hàng đầu cho các phân đoạn biểu đồ tròn, bánh xe màu và chỉ báo spinner. Bắt đầu từ một trong những cài đặt trước được xây dựng (Lime Swiss, Sunset, Sky, Aurora) hoặc thiết kế từ đầu.
Cách Tạo Gradient CSS
Toàn bộ quá trình mất dưới một phút.
- 01
Chọn một loại gradient
Chọn Linear, Radial hoặc Conic từ bộ chọn loại. Đối với linear, cũng đặt góc. Bản xem trước cập nhật ngay lập tức.
- 02
Thêm và định vị các điểm dừng màu
Nhấp vào Add Stop để chèn một dừng mới, sau đó kéo thanh trượt của nó hoặc nhập phần trăm để định vị nó. Tối đa sáu dừng được hỗ trợ — dừng tự sắp xếp lại theo vị trí.
- 03
Chọn màu của mỗi dừng
Nhấp vào mẫu màu để mở bộ chọn màu hệ thống, hoặc nhập giá trị hex trực tiếp. Cả định dạng RGB và hex đều hoạt động.
- 04
Xem trước theo thời gian thực
Bảng xem trước kết xuất gradient của bạn bằng cách sử dụng công cụ gradient gốc của trình duyệt, vì vậy kết quả khớp chính xác những gì CSS sẽ tạo ra trong sản xuất.
- 05
Sao chép khai báo CSS
Nhấp vào Sao chép để lấy khai báo background: linear-gradient(...) hoàn chỉnh. Dán nó vào bảng kiểu, một thành phần kiểu dáng hoặc một giá trị tùy ý Tailwind như bg-[<value>].
Các Trường Hợp Sử Dụng Gradient Phổ Biến
Mỗi loại gradient xuất sắc trong một kịch bản khác nhau.
- 01Nền phần anh hùng — gradient tuyến tính ở 135° cho một quét đường chéo hiện đại.
- 02Trạng thái di chuột nút — gradient tuyến tính hai dừng tinh tế cho độ sâu.
- 03Radial spotlight hoặc vignet — tối đến suốt radial trên một lớp phủ hình ảnh.
- 04Biểu đồ tròn và vòng tiến trình — gradient hình nón với dừng cứng.
- 05Xem trước bộ chọn bánh xe màu — gradient hình nón phổ đầy đủ.
- 06Gradient văn bản — áp dụng gradient cho nền, sau đó sử dụng background-clip: text.
Chạy Hoàn Toàn Trong Trình Duyệt Của Bạn
Trình tạo gradient chạy 100% ở phía máy khách — không có dữ liệu nào được gửi đến bất kỳ máy chủ nào. Xem trước được kết xuất bởi công cụ CSS của trình duyệt của bạn, điều đó có nghĩa là những gì bạn thấy khớp những gì trình duyệt của bất kỳ khách truy cập sẽ kết xuất bằng CSS tương tự.
Một lưu ý thực tế: các máy khách email vẫn còn hỗ trợ lỏng lẻo cho gradient CSS. Nếu bạn dán CSS được tạo vào mẫu email HTML, hãy thêm fallback solid background-color trước khai báo gradient để người nhận trên các máy khách cũ hơn thấy điều gì đó hợp lý.
Câu Hỏi Thường Gặp Về Trình Tạo Gradient CSS
Sự khác biệt giữa gradient tuyến tính, xuyên tâm và hình nón là gì?
Gradient tuyến tính chuyển quá theo một đường thẳng ở một góc nhất định. Gradient xuyên tâm lan rộng ra từ một điểm trung tâm — hữu ích cho các điểm sáng và hiệu ứng điểm. Gradient hình nón quét xung quanh một tâm như kim đồng hồ — lý tưởng cho các phân đoạn tròn và bánh xe màu.
Tôi có thể sử dụng cái này cho các dự án Tailwind CSS không?
Có. Sao chép giá trị được tạo và sử dụng nó dưới dạng giá trị tùy ý Tailwind, ví dụ: bg-[linear-gradient(135deg,#ff6b6b,#4ecdc4)]. Tailwind sẽ bao gồm nó trong bảng kiểu đầu ra của bạn.
Có xem trước khớp chính xác những gì tôi sẽ thấy trên trang web trực tiếp không?
Có — xem trước được kết xuất bởi cùng một công cụ gradient trình duyệt sẽ kết xuất CSS trực tiếp của bạn, vì vậy đầu ra chính xác về pixel.
Tôi có thể sử dụng gradient CSS trong các mẫu email không?
Hầu hết các máy khách email không hỗ trợ gradient CSS một cách đáng tin cậy. Luôn thêm một solid background-color trước khai báo gradient của bạn như một fallback.
Có giới hạn trên số lượng điểm dừng màu không?
Trình tạo hỗ trợ tối đa sáu dừng. Đối với hầu hết các thiết kế, hai đến bốn là đủ; nhiều hơn sáu có xu hướng giảm độ rõ ràng chứ không phải thêm sự phong phú.