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.
Cách sử dụng Trình tạo Gradient CSS
Tạo gradient CSS bằng mắt và sao chép ngay mã dùng được cho sản phẩm. Việc kết xuất diễn ra cục bộ trong trình duyệt, không tải lên gì cả.
- Chọn Type của gradient: linear-gradient hoặc radial-gradient.
- Đặt Angle cho gradient tuyến tính, hoặc chọn Shape như circle hay ellipse cho gradient radial.
- Thêm, đổi màu và kéo các điểm màu trong phần Color Stops.
- Bấm một mẫu màu dưới Presets để bắt đầu từ tổ hợp có sẵn.
- Sao chép CSS đã tạo và dán vào stylesheet của bạn.
Đặt hai điểm màu khác nhau cùng một vị trí để có cạnh cứng — cách nhanh làm nền sọc mà không cần ảnh.
Công cụ liên quan
- Trình tạo Box Shadow CSS Trình tạo box-shadow CSS trực tuyến miễn phí. Tạo bóng đẹp trực quan với offset, blur, spread, màu và inset có thể điều chỉnh. Xem trước trực tiếp và sao chép mã ngay lập tức.
- Trình tạo Border Radius CSS Trình tạo border-radius CSS trực quan. Điều chỉnh từng góc độc lập với xem trước thời gian thực và sao chép mã CSS ngay lập tức.
- Trình tạo CSS Grid Trình tạo CSS Grid trực quan miễn phí với xem trước trực tiếp. Thiết kế bố cục lưới responsive tương tác và xuất mã CSS sẵn sàng sản xuất ngay.
- Trình tạo CSS Flexbox Trình tạo CSS Flexbox trực quan với xem trước trực tiếp. Điều chỉnh thuộc tính flex và nhận mã CSS sẵn sàng sử dụng.
- Trình Tạo Bo Góc CSS Trình tạo bo tròn sáng tạo miễn phí trực tuyến. Kéo 8 điểm điều khiển hoặc chọn hình blob có sẵn để tạo hình khối CSS hữu cơ và sao chép mã ngay lập tức.
- Trình chuyển đổi màu Trình chuyển đổi màu trực tuyến miễn phí. Chuyển đổi định dạng HEX, RGB, HSL, HSV ngay lập tức với bộ chọn trực quan. 100% riêng tư, chạy trong trình duyệt của bạn.
- Trình tạo easing CSS Trình tạo easing CSS trực tuyến miễn phí. Kéo các điểm điều khiển cubic-bezier trên đường cong tương tác, chọn trong 18 mẫu có sẵn, xem bóng lặp lại liên tục và sao chép hàm thời gian ngay.
- Trình tạo text-shadow CSS Trình tạo text-shadow CSS trực tuyến miễn phí. Xếp nhiều lớp bóng với lệch ngang, làm mờ, màu và độ mờ, thử mẫu Neon, 3D, Retro và sao chép mã CSS ngay.