Trình tạo Gradient

Chọn hai hoặc nhiều màu, kéo gradient theo ý thích, sao chép CSS. Hoặc tải xuống dưới dạng PNG để dùng làm hình nền, nền slide hoặc phông nền bài đăng trên mạng xã hội. Hỗ trợ gradient tuyến tính, xuyên tâm và hình nón, cùng với chế độ gradient lưới cho phông nền mềm mại kiểu Apple mà bạn thấy trong giao diện người dùng hiện đại.

Các loại gradient được giải thích

• Tuyến tính: đường thẳng từ màu A đến màu B. Có bộ chọn hướng (trên→dưới, đường chéo, v.v.).
• Xuyên tâm: đồng tâm — màu A ở trung tâm nhạt dần sang màu B ở các cạnh. Hữu ích cho hiệu ứng đèn sân khấu.
• Hình nón: quét quanh một điểm trung tâm giống như bánh xe màu. Xu hướng trong thiết kế giao diện người dùng hiện đại.
• Lưới (cao cấp): nhiều đốm màu hòa trộn mượt mà. Giao diện "gradient Apple".

Những gì bạn có thể sao chép

1. CSS: khai báo linear-gradient(...) hoặc background-image: sẵn sàng để dán.
2. Tailwind: lớp bg-gradient-* gần nhất cùng với các bổ sung màu tùy chỉnh.
3. SVG: để sử dụng có thể mở rộng trong biểu tượng hoặc đồ họa giao diện.
4. Tải xuống PNG: mọi kích thước, bao gồm hình nền điện thoại (1284×2778), máy tính để bàn (3840×2160) và hình vuông (1080×1080).

Các trường hợp sử dụng phổ biến

• Hình nền điện thoại: gradient lưới rất phổ biến trên iOS. Hãy thử Xem trước hình nền iPhone của chúng tôi để kiểm tra.
• Phông nền bài đăng trên mạng xã hội: tạo giao diện thương hiệu ngay lập tức cho đồ họa trích dẫn.
• Phần Hero: nền gradient xuất hiện ở khắp mọi nơi trên các trang đích.
• Bộ trình chiếu: thay thế nền đơn sắc nhàm chán.

Chọn màu sắc phù hợp

Liền kề trên bánh xe màu = tinh tế, hài hòa. Đối diện = táo bạo, thu hút sự chú ý. Thêm một điểm dừng thứ ba ở giữa để thu hẹp khoảng cách rộng. Đối với gradient trung thành với thương hiệu, hãy dán mã HEX thương hiệu của bạn và chọn một sắc thái hoặc tông màu cho điểm dừng thứ hai. Sử dụng Công cụ chuyển đổi màu của chúng tôi để tìm sắc thái (HSL với độ sáng cao hơn) hoặc tông màu (thấp hơn).