Đến phần nội dung
Toova
Tất cả công cụ

Bộ tạo gradient CSS

Riêng tư theo thiết kế — chạy hoàn toàn trong trình duyệt của bạn

Xây dựng các dải màu CSS tuyến tính và xuyên tâm bằng hình ảnh, trong trình duyệt của bạn. Toova cho bạn đặt điểm dừng màu, điều chỉnh góc, chuyển loại, và xuất CSS sẵn sàng để dán — tất cả mà không tải bất cứ thứ gì lên máy chủ.

Dải tuyến tính, xuyên tâm, và conic

Dải tuyến tính di chuyển dọc trục thẳng được định nghĩa bởi góc hoặc từ khóa hướng. Dải xuyên tâm mở rộng từ một điểm trung tâm. Dải conic quét quanh một góc — hoàn hảo cho nền kiểu biểu đồ tròn hoặc hiệu ứng bánh xe màu. Toova phơi bày cả ba với điều khiển trực quan, để bạn có thể xây dải bạn muốn mà không cần ghi nhớ mọi biến thể của cú pháp CSS.

Điểm dừng màu và làm dịu

Kéo điểm dừng màu dọc thanh dải để điều khiển mỗi màu bắt đầu và kết thúc ở đâu. Thêm bao nhiêu điểm dừng bạn cần — Toova không giới hạn nó. Dùng các thiết lập trước làm dịu để giới thiệu nội suy phi tuyến tính, tránh phần giữa xám đục làm phiền các dải hai màu đơn giản. Đầu ra CSS dùng thuộc tính chuẩn được hỗ trợ trong mọi trình duyệt hiện đại.

Tạo chỉ trong trình duyệt

Mọi dải được tạo cục bộ trong trình duyệt của bạn. Các màu bạn chọn, các điểm dừng bạn đặt, đầu ra CSS — không cái nào rời trang. Đó là quá mức cho dải, nhưng nó có nghĩa là công cụ nhanh và đáng tin cậy, và trang hoạt động ngoại tuyến sau lần tải đầu tiên. Tab Network sẽ trống trong khi dùng.

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

Khi nào tôi nên dùng dải conic?
Dải conic hoàn hảo cho hiệu ứng biểu đồ tròn, bánh xe màu, và nền xoay trừu tượng. Chúng quét quanh một điểm trung tâm, một thứ mà cả dải tuyến tính và xuyên tâm đều không thể làm. Hỗ trợ trình duyệt hiện vững chắc qua các động cơ hiện đại.
Tôi tránh phần giữa đục trong dải hai màu thế nào?
Thêm một điểm dừng trung gian với màu cân bằng về nhận thức, hoặc chọn màu có độ sáng tương tự. Trộn màu bổ sung qua điểm giữa RGB của chúng tạo ra xám — chọn điểm giữa thủ công trong OKLCH tránh nó.
Tôi có thể xuất sang định dạng khác không?
Đầu ra là CSS chuẩn, hoạt động trực tiếp trong bất kỳ ngữ cảnh web nào. Cho công cụ thiết kế, sao chép từng điểm dừng màu và sao chép dải trong Figma hoặc Sketch.
Nó có hỗ trợ độ trong suốt không?
Có. Bất kỳ điểm dừng màu nào cũng có thể có kênh alpha. Hữu ích để làm mờ các cạnh vào nền hoặc xếp lớp dải với điểm dừng bán trong suốt.
Dữ liệu của tôi có được gửi đi đâu không?
Không. Việc tạo chạy hoàn toàn trong trình duyệt của bạn.