Chuyển đến nội dung
patrache.tools

Tạo gradient

Công cụ tạo CSS gradient trực tuyến miễn phí. Tạo gradient tuyến tính và xuyên tâm, điều chỉnh hướng, màu và điểm dừng. Sao chép mã.

Loại
Góc
90°
Màu sắc
0%
100%
Mã CSS
background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
lockTệp không được gửi đến máy chủ
Chia sẻ
Nhúng

Nhúng công cụ này vào trang của bạn

Công cụ tạo gradient CSS miễn phí. Thiết kế trực quan gradient tuyến tính, xuyên tâm và hình nón, sau đó sao chép mã CSS. Xử lý trong trình duyệt.

Cách sử dụng Tạo gradient?

  1. Chọn loại gradient.
  2. Thêm điểm dừng màu và đặt màu.
  3. Sao chép mã CSS đã tạo.

Câu hỏi thường gặp về Tạo gradient

Hỗ trợ loại gradient nào?

Hỗ trợ gradient tuyến tính, xuyên tâm và hình nón.

Có sao chép mã CSS trực tiếp được không?

Có, sao chép mã CSS gradient bằng một cú nhấp để áp dụng trực tiếp.

Vì sao giữa dải chuyển sắc lại xuất hiện vệt xám đục?

Khi hai màu nằm đối diện nhau trên vòng màu, quá trình pha đi qua một điểm mà độ bão hòa gần bằng không, và điều đó hiện ra thành vệt xám xỉn. Cặp xanh lam với cam, đỏ với xanh lá là thủ phạm quen thuộc. Thêm một màu thứ ba làm điểm dừng ở giữa sẽ dẫn dải màu vòng qua vùng xám, còn chọn hai sắc gần nhau trên vòng màu thì tránh được vấn đề ngay từ đầu.

Tôi có lưu dải chuyển sắc thành tệp ảnh chứ không chỉ CSS được không?

Có, bạn có thể tải về tệp PNG rồi dùng ngay làm nền slide, ảnh mạng xã hội hay bản in. Nhưng với trang web thì CSS vẫn tốt hơn nhiều: không phải tải tệp nào, dải màu co giãn theo mọi kích thước màn hình mà không vỡ, và không bao giờ bị răng cưa như ảnh bitmap phóng to.

Cách tận dụng Tạo gradient hiệu quả?

  • Hãy pha hai màu gần nhau trên vòng tròn màu; hai màu đối lập sẽ tạo dải xám đục ở giữa.
  • Góc chéo 135 độ là lựa chọn an toàn nhất cho banner và nền thẻ.
  • Nếu định đặt chữ lên trên, hãy kiểm tra tương phản với điểm dừng màu sáng nhất.

Powered by Patrache Studio Tools

Vui lòng cho phép quảng cáo trên trang này

Để sử dụng các công cụ này, hãy cho phép quảng cáo trên trang này. Quảng cáo giúp duy trì dịch vụ miễn phí.

Mở trình chặn quảng cáo, tắt chặn cho trang này rồi kiểm tra lại.