Trình tạo Gradient CSS
Tạo gradient CSS tuyệt đẹp trực quan. Tạo gradient tuyến tính, hướng tâm và hình nón với nhiều điểm dừng màu, góc và vị trí tùy chỉnh. Sao chép mã CSS sẵn sàng sản xuất ngay lập tức.
Gradient CSS là gì?
Gradient CSS là giá trị hình ảnh CSS hiển thị chuyển đổi mượt mà giữa hai hoặc nhiều màu mà không cần tệp hình ảnh. Gradient được render bởi trình duyệt, độc lập với độ phân giải và hiệu suất cao.
Những loại gradient CSS nào được hỗ trợ?
Trình tạo hỗ trợ ba loại: linear-gradient (màu dọc theo đường thẳng), radial-gradient (màu tỏa từ tâm), và conic-gradient (màu xoay quanh tâm như mặt đồng hồ).
Khác biệt giữa gradient tuyến tính và hướng tâm?
Gradient tuyến tính chuyển màu dọc theo đường thẳng xác định bởi góc hoặc từ khóa hướng. Gradient hướng tâm chuyển màu ra ngoài từ tâm theo hình tròn hoặc elip.
Có thể dùng bao nhiêu điểm dừng màu?
Bạn có thể dùng bao nhiêu điểm dừng màu tùy ý. Mỗi điểm dừng xác định một màu và tùy chọn vị trí (0% đến 100%) dọc theo đường gradient. Nhiều điểm dừng tạo chuyển đổi đa màu phức tạp.
Làm thế nào sử dụng mã CSS được tạo?
Sao chép mã CSS được tạo và dán làm giá trị thuộc tính background hoặc background-image trong bảng kiểu CSS. Mã hoạt động trong tất cả trình duyệt hiện đại.
Điểm dừng màu trong gradient là gì?
Điểm dừng màu xác định màu cụ thể tại vị trí cụ thể dọc theo đường gradient. Ví dụ "red 0%, blue 50%, green 100%" tạo gradient bắt đầu đỏ, chuyển xanh lam ở giữa và kết thúc xanh lá.
Có thể tạo gradient có góc không?
Có, gradient tuyến tính hỗ trợ giá trị góc từ 0deg đến 360deg. Bạn cũng có thể dùng từ khóa hướng như "to right", "to bottom", "to top left".
Gradient CSS có phản hồi không?
Có, gradient CSS vốn dĩ phản hồi vì dựa trên vector và được render bởi trình duyệt. Chúng mở rộng hoàn hảo đến mọi kích thước vùng chứa mà không mất chất lượng hoặc tăng kích thước tệp.
Gradient CSS có ảnh hưởng hiệu suất trang không?
Gradient CSS thường rất hiệu suất. Chúng loại bỏ yêu cầu HTTP cho tệp hình ảnh và được tăng tốc phần cứng. Tuy nhiên, gradient cực kỳ phức tạp có thể ảnh hưởng rendering trên thiết bị cấp thấp.
Có thể dùng gradient cho nền và viền không?
Có, gradient có thể dùng cho background-image, border-image, mask-image và bất kỳ thuộc tính nào chấp nhận giá trị hình ảnh CSS.
Trình duyệt nào hỗ trợ gradient CSS?
Tất cả trình duyệt hiện đại đều hỗ trợ gradient CSS gồm Chrome, Firefox, Safari, Edge và Opera. Hỗ trợ xuất sắc từ IE10. Tiền tố nhà cung cấp không còn cần thiết.
Làm thế nào tạo gradient lặp lại?
Dùng repeating-linear-gradient hoặc repeating-radial-gradient thay vì phiên bản chuẩn. Chúng lặp lại mẫu gradient để lấp đầy toàn bộ phần tử, tạo hiệu ứng sọc hoặc hoa văn.
Có thể animat gradient CSS không?
Gradient CSS không thể animat trực tiếp với chuyển đổi CSS. Tuy nhiên, bạn có thể animat background-position, background-size hoặc dùng thuộc tính CSS tùy chỉnh với @property.
Trình tạo gradient này có miễn phí không?
Có, trình tạo gradient CSS này hoàn toàn miễn phí. Không cần đăng ký, không giới hạn sử dụng, tất cả mã được tạo là của bạn cho mọi dự án mà không cần ghi công.