Trình tạo Gradient
Công cụ tạo CSS gradient này tạo gradient linear, radial và conic từ hai hoặc ba màu, kèm bản xem trước trực tiếp và CSS background sẵn sàng để sao chép.
Về công cụ này
Công cụ tạo CSS gradient này tạo gradient linear, radial và conic từ hai hoặc ba màu, kèm bản xem trước trực tiếp và CSS background sẵn sàng để sao chép.
Cách sử dụng
- Chọn kiểu gradient: linear, radial hoặc conic.
- Đặt góc bằng thanh trượt (0–360°).
- Chọn hai màu, hoặc đánh dấu Use 3 colors để thêm màu thứ ba.
- Nhấn Copy CSS và dán quy tắc background vào stylesheet của bạn.
Điều nên biết
- linear-gradient() pha trộn màu dọc theo một đường thẳng theo góc đã đặt, trong đó 90deg chạy từ trái sang phải.
- radial-gradient(circle, …) lan tỏa màu từ tâm ra ngoài.
- conic-gradient(from <angle>, …) quét màu quanh một điểm tâm, hữu ích cho biểu đồ tròn và vòng màu.
- CSS gradient là hình ảnh do trình duyệt vẽ, nên chúng co giãn đến mọi kích thước mà không làm tăng dung lượng tệp.
- Cả ba hàm gradient đều được hỗ trợ trên mọi trình duyệt lớn hiện nay.
Chạy hoàn toàn trong trình duyệt của bạn — không có dữ liệu nào bạn nhập được tải lên hay lưu lại.
Câu hỏi thường gặp
Làm sao tạo CSS gradient?
Dùng một hàm gradient làm background, ví dụ background: linear-gradient(135deg, #1db954, #0a1628). Công cụ này viết sẵn dòng đó cho bạn từ màu và góc bạn chọn.
Gradient linear, radial và conic khác nhau thế nào?
Gradient linear đổi màu dọc theo một đường thẳng, gradient radial tỏa ra từ một điểm tâm, còn gradient conic xoay quanh tâm giống kim đồng hồ.
Gradient có thể có nhiều hơn hai màu không?
Có. CSS gradient chấp nhận bao nhiêu điểm dừng màu cũng được. Công cụ này hỗ trợ hai hoặc ba màu; bạn có thể tự thêm điểm dừng vào CSS đã sao chép.
CSS gradient có làm chậm website không?
Không đáng kể. Chúng được trình duyệt vẽ và không cần tải thêm hình ảnh, nên thường nhẹ hơn tệp ảnh gradient.