Trình tạo gradient

Gradient OKLCH đồng nhất về mặt nhận thức, không có dải xám, xuất CSS chỉ bằng một cú nhấp.

Hồ sơ →Vị trí0%

Hồ sơ →Vị trí100%

Góc90°Nội suy mượt (không có vùng chết)

Thư viện Gradient

48 kết hợp cổ điển từ cộng đồng - nhấp để áp dụng điểm dừng, loại và góc cùng lúc.

Hoàng hôn

Đại dương

Rừng

Kẹo

Hoàng hôn

Trầm lặng

Mã CSS

background: linear-gradient(90deg, #1D3557 0%, 463C7B 25%, 7B3C8A 50%, B4387B 75%, #E63946 100%);

Cách công cụ gradient hoạt động - tạo điểm dừng, điều chỉnh, sao chép CSS.

2-6 điểm dừng với vị trí tự do, nội suy OKLCH không có vùng màu mờ, cộng thêm 48 cài đặt được sắp xếp sẵn.

01
Tạo điểm dừng
2-6 điểm dừng: chọn mỗi màu, kéo vị trí, hoặc dán giá trị HEX.
02
Điều chỉnh
Chuyển đổi giữa linear/radial/conic, kéo góc - hoặc áp dụng cài đặt được sắp xếp sẵn chỉ bằng một cú nhấp.
03
Sao chép
Chế độ mịn tự động mở rộng các điểm giữa OKLCH; CSS được sẵn sàng để dán và liên kết sẽ mang theo gradient của bạn.

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

Bốn câu hỏi mà người dùng thực sự hỏi.

Tại sao gradient chuyển sang màu xám ở giữa?: Nội suy RGB đi qua vùng có độ bão hòa thấp. Nội suy OKLCH theo sắc độ, nên phần giữa vẫn sạch.
Tôi có thể thêm nhiều điểm dừng hơn không?: Có - từ 2 đến 6 điểm dừng, mỗi điểm có màu và vị trí riêng. Chế độ mượt chèn các điểm giữa OKLCH giữa các điểm lân cận để toàn bộ dốc màu vẫn sạch.
Trình duyệt nào chạy được CSS đã xuất?: Tất cả trình duyệt hiện đại. Công cụ phát ra các điểm dừng RGB đơn giản, nên không cần chuyển đổi ngay cả với các engine cũ hơn.
Làm thế nào để chia sẻ gradient?: Mọi thay đổi đều đồng bộ vào URL trang (#g=...). Gửi liên kết trên thanh địa chỉ cho đồng nghiệp và nó sẽ mở chính xác như bạn đã điều chỉnh.

Sau khi bạn nhận được kết quả

Tiếp tục từ đây và đưa các màu vào sử dụng.

Trình tạo thang màu

Chuyển đổi bất kỳ màu nào thành thang màu 11 bước cho hệ thống thiết kế, đều về mặt nhận thức trong OKLCH, độ tương phản WCAG cho mỗi bước, xuất sang Tailwind/CSS/SCSS/JSON.

Bộ chuyển đổi màu

Nhập bất kỳ định dạng nào (HEX / RGB / HSL / tên) và chuyển đổi sang tất cả không gian màu theo thời gian thực.

Bảng màu

Nhấn Space để ngẫu nhiên hóa, khóa, kéo để sắp xếp lại, chia sẻ bằng URL — mọi chức năng mà một bảng màu cần.

Bộ kiểm tra độ tương phản

Xác thực độ tương phản WCAG 2.1 giữa bất kỳ màu tiền cảnh và màu nền nào.

Cách công cụ gradient hoạt động - tạo điểm dừng, điều chỉnh, sao chép CSS.

2-6 điểm dừng với vị trí tự do, nội suy OKLCH không có vùng màu mờ, cộng thêm 48 cài đặt được sắp xếp sẵn.

Tạo điểm dừng

2-6 điểm dừng: chọn mỗi màu, kéo vị trí, hoặc dán giá trị HEX.

Điều chỉnh

Chuyển đổi giữa linear/radial/conic, kéo góc - hoặc áp dụng cài đặt được sắp xếp sẵn chỉ bằng một cú nhấp.

Sao chép

Chế độ mịn tự động mở rộng các điểm giữa OKLCH; CSS được sẵn sàng để dán và liên kết sẽ mang theo gradient của bạn.

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

Bốn câu hỏi mà người dùng thực sự hỏi.

Tại sao gradient chuyển sang màu xám ở giữa?

Nội suy RGB đi qua vùng có độ bão hòa thấp. Nội suy OKLCH theo sắc độ, nên phần giữa vẫn sạch.

Tôi có thể thêm nhiều điểm dừng hơn không?

Có - từ 2 đến 6 điểm dừng, mỗi điểm có màu và vị trí riêng. Chế độ mượt chèn các điểm giữa OKLCH giữa các điểm lân cận để toàn bộ dốc màu vẫn sạch.

Trình duyệt nào chạy được CSS đã xuất?

Tất cả trình duyệt hiện đại. Công cụ phát ra các điểm dừng RGB đơn giản, nên không cần chuyển đổi ngay cả với các engine cũ hơn.

Làm thế nào để chia sẻ gradient?

Mọi thay đổi đều đồng bộ vào URL trang (#g=...). Gửi liên kết trên thanh địa chỉ cho đồng nghiệp và nó sẽ mở chính xác như bạn đã điều chỉnh.