🎨 Tạo màu chuyển sắc CSS

°

Các điểm màu

Mẫu chuyển sắc có sẵn

Nhiều loại

Hỗ trợ các loại gradient CSS tuyến tính, xuyên tâm và hình nón.

Kiểm soát chính xác

Tự do điều chỉnh vị trí góc và điểm dừng màu để có độ chuyển màu hoàn hảo đến từng pixel.

Xem trước trực tiếp

Xem sự thay đổi độ dốc trong thời gian thực khi bạn điều chỉnh các tham số.

Sao chép bằng một cú nhấp chuột

Mã CSS đã tạo sẵn sàng để dán trực tiếp vào dự án của bạn.

100% riêng tư

Tất cả quá trình xử lý diễn ra cục bộ trong trình duyệt của bạn. Không có dữ liệu được tải lên bất kỳ máy chủ nào.

Hoàn toàn miễn phí

Không đăng ký, không giới hạn. Miễn phí sử dụng mãi mãi.

bài viết liên quan

Hướng dẫn chuyển màu CSS hoàn chỉnh: Từ tuyến tính đến hình nón

Hướng dẫn toàn diện về cả ba loại gradient CSS, bao gồm cú pháp, tham số và ví dụ thực tế.

Hướng dẫn đầy đủ

Xu hướng thiết kế chuyển màu: Tạo hiệu ứng hình ảnh hiện đại

Khám phá các xu hướng thiết kế chuyển màu hiện tại từ chuyển màu nhẹ nhàng đến các màu sắc đậm nét và tìm cảm hứng thiết kế của bạn.

Xu hướng thiết kế

Các phương pháp hay nhất về hiệu suất của CSS gradient: Tối ưu hóa kết xuất

Hiểu cách độ dốc CSS tác động đến hiệu suất hiển thị trang và tìm hiểu cách viết các kiểu chuyển màu hiệu suất cao.

Hiệu suất

Chuyển màu và khả năng tiếp cận: Thiết kế cho mọi người

Tìm hiểu cách sử dụng độ dốc trong khi vẫn đảm bảo khả năng truy cập web và tuân thủ WCAG.

Khả năng tiếp cận

Câu hỏi thường gặp

Độ dốc CSS là gì?
Dải màu CSS là hiệu ứng nền được tạo bằng CSS giúp chuyển đổi mượt mà giữa hai hoặc nhiều màu. Các loại phổ biến bao gồm gradient tuyến tính, gradient xuyên tâm và gradient hình nón.
Sự khác biệt giữa độ dốc tuyến tính và xuyên tâm là gì?
Độ dốc tuyến tính chuyển tiếp dọc theo một đường thẳng (có góc có thể điều chỉnh), độ dốc xuyên tâm chuyển đổi ra ngoài từ điểm trung tâm trong hình tròn hoặc hình elip và độ dốc hình nón xoay quanh điểm trung tâm.
Tôi có thể thêm bao nhiêu điểm dừng màu?
Không có giới hạn cố định nhưng nên sử dụng 2-5 điểm dừng màu để có hiệu ứng hình ảnh tốt nhất. Quá nhiều điểm dừng có thể làm cho gradient trông lộn xộn.
Trình duyệt nào hỗ trợ CSS được tạo?
Tất cả các trình duyệt hiện đại (Chrome, Firefox, Safari, Edge) đều hỗ trợ đầy đủ độ dốc CSS. IE 11 hỗ trợ các gradient tuyến tính cơ bản nhưng không hỗ trợ các gradient hình nón.
Làm cách nào để sử dụng điều này trong dự án của tôi?
Chỉ cần nhấp vào "Sao chép CSS" và dán thuộc tính nền được tạo vào tệp CSS của bạn. Nó hoạt động trên mọi phần tử HTML hỗ trợ thuộc tính nền.