Handytool
Nhà phát triểnMiễn phíChạy cục bộ

CSS gradient generator

Xây dựng gradients CSS tuyến tính, hướng tâm và hình nón — kéo các điểm dừng, chọn màu sắc, sao chép CSS.

Xem trước
CSS
background: linear-gradient(135deg, #B7FF3E 0%, #0a0a0a 100%);
Loại
Presets

Thêm tối đa sáu điểm dừng màu, kéo thanh trượt vị trí và sao chép CSS.

Giới thiệu về CSS gradient generator

Trình tạo gradient CSS của Handytool xây dựng gradients tuyến tính, hướng tâm và hình nón với tối đa sáu điểm dừng màu. Kéo vị trí của một điểm dừng, thay đổi màu sắc của nó, chuyển đổi loại gradient và bản xem trước trực tiếp cùng với khai báo CSS cập nhật tức thì. Bắt đầu từ một trong các preset được xây dựng sẵn — Lime Swiss, Sunset, Sky, Aurora — hoặc thiết kế của riêng bạn từ đầu.

Tính năng của CSS gradient generator

  • 01

    Tuyến tính, hướng tâm và hình nón

    Tuyến tính là gradient nền hàng ngày; hướng tâm tuyệt vời cho các điểm nổi bật và vignet; hình nón hoàn hảo cho biểu đồ hình tròn, bánh xe màu sắc và nền xoay.

  • 02

    Tối đa sáu điểm dừng màu

    Thêm và xóa các điểm dừng, đặt vị trí của mỗi cái bằng thanh trượt và chọn màu sắc của nó qua bộ chọn màu hệ thống hoặc giá trị hex. Các điểm dừng sắp xếp lại theo vị trí tự động.

  • 03

    Khai báo CSS có thể sao chép

    Đầu ra là khai báo background: ... hoàn chỉnh mà bạn có thể dán trực tiếp vào bảng kiểu, thành phần được tạo kiểu hoặc lớp giá trị tùy ý Tailwind.

Câu hỏi thường gặp về CSS gradient generator

Sự khác biệt giữa tuyến tính, hướng tâm và hình nón là gì?
Gradients tuyến tính chạy theo một đường thẳng ở một góc nhất định; gradients hướng tâm lan tỏa ra từ một trung tâm; gradients hình nón quét xung quanh một điểm như kim đồng hồ. Mỗi cái phù hợp với một hiệu ứng trực quan khác nhau.
Tôi nên sử dụng bao nhiêu điểm dừng màu?
Hai điểm dừng là gradient hai màu cổ điển. Ba hoặc bốn cho phép bạn tạo các quá trình chuyển đổi thực tế (hoàng hôn, bắc cực). Hơn sáu thường trông ồn ào — đó là lý do tại sao trình tạo này giới hạn ở sáu.
Tôi có thể sử dụng điều này cho nền trong mẫu email không?
Hầu hết các máy khách email vẫn không hỗ trợ gradients CSS hiện đại một cách đáng tin cây — cung cấp một màu dự phòng vững chắc ngoài gradient nền nếu bạn sao chép cái này vào mẫu email.
Có phải đầu ra chính xác pixel không?
Có — bản xem trước được hiển thị bởi engine gradient gốc của trình duyệt, vì vậy những gì bạn thấy chính xác là những gì CSS của bạn sẽ tạo ra.

Công cụ liên quan

Nhà phát triển →

Khám phá các công cụ khác

Tất cả công cụ →