CSS gradient generator

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.