Đầu vào
Đang chuẩn bị không gian làm việc…
Cách sử dụng
- Chọn Tuyến tính hoặc Hướng tâm và đặt hai màu.
- Chỉnh điểm dừng và góc nếu dùng gradient tuyến tính.
- Sao chép CSS rồi áp dụng khai báo background cho phần tử.
Điều chỉnh gradient CSS
Gradient CSS tạo nền bằng màu thay vì tệp ảnh riêng. Nền có thể co giãn theo thẻ, banner hoặc phần trang và vẫn chỉnh sửa được trong stylesheet.
Công cụ tập trung vào hai màu. Chọn hướng tuyến tính hoặc gradient hướng tâm hình tròn ở giữa, rồi đặt điểm dừng để điều khiển đầu và cuối chuyển màu.
Hướng và điểm dừng màu
Góc chỉ áp dụng cho gradient tuyến tính. Chế độ hướng tâm dùng hình tròn ở giữa phần tử và không có góc.
Điểm dừng từ 0% đến 100%. Đặt gần nhau thu hẹp chuyển màu; đặt cùng vị trí tạo ranh giới màu đột ngột.
#2563eb → #9333ea, 135 degreesbackground: linear-gradient(135deg, #2563eb 0%, #9333ea 100%);Gradient tuyến tính hai điểm dừng với màu và góc đang hiển thị.
Ý nghĩa bản xem trước
Bản xem trước dùng trực tiếp CSS được tạo. Tỷ lệ có thể khác phần tử đích, nhất là gradient hướng tâm.
Điểm đầu không được nằm sau điểm thứ hai. Công cụ tạo một lớp gradient hai màu; hãy thêm điểm dừng hoặc lớp khác trong stylesheet.
Áp dụng khai báo
Đầu ra bắt đầu bằng background:. Áp dụng vào selector cần dùng và kiểm tra ảnh nền, màu nền hoặc thuộc tính viết tắt có thể bị thay thế.
Đầu vào văn bản tối đa 1 MiB. Chuyển đổi CSS và HTML chạy trong Worker với giới hạn 30 giây. Công cụ màu dùng sRGB; kiểu dáng được tạo là bản xem trước và cần kiểm thử trong bố cục của bạn.
Câu hỏi thường gặp
Có thể thêm màu thứ ba không?
Công cụ hỗ trợ hai điểm dừng. Sao chép CSS rồi thêm các điểm màu phân cách bằng dấu phẩy nếu cần.
Vì sao chế độ hướng tâm không có góc?
Gradient hướng tâm hình tròn lan ra từ tâm. Góc chỉ có ý nghĩa với gradient tuyến tính.
Có thể tạo đường phân màu sắc nét không?
Có. Đặt hai điểm dừng cùng vị trí để bỏ phần chuyển màu.
Có tạo tệp ảnh không?
Không. Sao chép CSS cung cấp khai báo background. Trình duyệt vẽ gradient khi khai báo được dùng.
Vì sao trên phần tử của tôi trông khác?
Kích thước và tỷ lệ phần tử đích ảnh hưởng kết quả. Hãy kiểm tra trên phần tử thực thay vì chỉ dựa vào thẻ xem trước.