Miễn phí tốt nhất Tạo gradient CSS
Xây gradient CSS tuyến tính và bán kính với xem trước trực tiếp - sao chép mã nền.
100% miễn phí
Không đăng ký
Không dấu nước
✨
Go Pro cho các mô hình AI tốt nhất - hình ảnh, video và chat - cộng với các tải lên lớn hơn, ưu tiên trong hàng đợi và không chờ đợi.
Tăng cấp lên Pro
Tình yêu Best.Free? Chia sẻ đi.
Làm thế nào để làm
- Chọn một kiểu. Chọn tuyến tính hay bán kính, và đặt góc cho gradient tuyến tính.
- Chọn màu và dừng. Đặt hai hoặc nhiều màu và vị trí của chúng; thêm dừng thứ ba trong các tùy chọn cao cấp.
- Sao chép CSS. Nhấn Copy CSS và dán gradient nền vào bảng kiểu dáng của bạn.
Về công cụ này
Xây dựng gradient CSS bằng mắt thay vì sửa giá trị mù lòa. Chuyển đổi giữa tuyến tính và bán kính, kéo góc gradient tuyến tính, và chọn màu và vị trí ít nhất hai điểm dừng trong khi thanh xem trước rộng đầy cập nhật trực tiếp. Sao chép thuộc tính nền kết quả trực tiếp vào bản kiểu dáng của bạn. Tùy chọn Cao cấp thêm điểm dừng màu thứ ba cho hỗn hợp giàu hơn và cho phép bạn chọn hình tròn hoặc hình elip cho gradient bán kính. Tất cả chạy trong trình duyệt của bạn.
Người ta dùng nó làm gì?
- Thiết kế gradient nền anh hùng hoặc phần
- Tạo nút hoặc thẻ đổ màu gradient
- Trộn hai hoặc ba màu hiệu mịn
- Tạo hiệu ứng ánh sáng hoặc viền hình ảnh
Câu hỏi thường gặp
Một gradient tuyến tính pha trộn dọc theo một đường thẳng ở góc mà bạn chọn; gradient bán kính pha trộn ra ngoài từ một điểm trung tâm như một vòng tròn hoặc elip.
Đối với gradient tuyến tính, góc định hướng hướng của hỗn hợp - 0° đi từ dưới lên trên, 90° từ trái sang phải, và tương tự.
Mỗi điểm dừng là một màu được đặt ở một phần trăm dọc theo gradient. Di chuyển điểm dừng thay đổi vị trí của màu đó và độ sắc nét của sự pha trộn.
Có. Mở tùy chọn Cao cấp để thêm dừng màu thứ ba, được chèn giữa đầu tiên và cuối cùng cho hỗn hợp nhiều màu.
Không, màu sắc và dừng được chuyển thành một chuỗi CSS trong trình duyệt của bạn.
Hoàn toàn miễn phí, không tài khoản và không giới hạn - một công cụ bên khách hàng không có gì để đo.
Có. Nó chạy trong trình duyệt của bạn, vì vậy CSS Gradient Generator hoạt động trên điện thoại và máy tính bảng cũng như máy tính - không có ứng dụng nào cần cài đặt.
Thường chỉ vài giây cho một tập tin điển hình - CSS Gradient Generator bắt đầu làm việc ngay khi bạn đưa vào.
Sử dụng thường xuyên là không giới hạn, dưới một cái đầu sử dụng công bằng hào phóng mà giữ nó nhanh cho mọi người.
Tất cả trình duyệt hiện đại - Chrome, Safari, Firefox và Edge. CSS Gradient Generator không cần cài đặt gì ngoài trình duyệt bạn đã sử dụng.