Trình tạo animation loading CSS
CSS Loader Generator
Thiết kế spinner vòng quỹ đạo hoặc ba chấm nảy với khung 24–160 px, chu kỳ 0,2–4 giây và màu tùy chọn, rồi sao chép CSS kèm @keyframes và reduced-motion.
Thiết kế / phòng thí nghiệm hệ thống thị giác
Thiết kế
Tạo nguyên mẫu hệ thống CSS và màu sắc với bản xem trước trực tiếp và code sẵn sàng sao chép.
Thiết kế
17 công cụ thiết yếu. Xây dựng hệ thống CSS và màu sắc với phản hồi trực quan theo thời gian thực và kết quả sẵn sàng để sao chép.
Đang hiển thị 17 trong tổng số 17 công cụ
Trình tạo hộp kiểm CSS
CSS Checkbox Generator
Tạo kiểu checkbox 18–64 px giữ nguyên input thật — focus bàn phím và công nghệ hỗ trợ vẫn hoạt động — với màu hai trạng thái, rồi sao chép CSS sẵn dùng.
Trình tạo công tắc CSS
CSS Switch Generator
Thiết kế công tắc CSS thuần với thanh trượt 44–128 px và núm trượt khớp tự động, xem trước hiệu ứng 180 ms, rồi sao chép mã kèm xử lý focus và reduced-motion.
Trình tạo clip path CSS
CSS Clip Path Generator
Chỉnh đỉnh bằng cách kéo, bàn phím hoặc tọa độ. Bắt đầu từ bốn mẫu và sao chép khai báo clip-path hoặc CSS đầy đủ ngay trên máy.
Trình tạo pattern nền CSS
CSS Background Pattern Generator
Tổ hợp nền chấm, lưới hoặc chéo chỉ từ gradient CSS — không tệp hình ảnh — với ô 8–96 px và hai màu, rồi sao chép quy tắc ba khai báo sẵn dùng.
Trình tạo cubic-bezier CSS
CSS Cubic Bezier Generator
Chỉnh hai tay cầm của đường cong easing, xem nhịp chuyển động thật ở thời lượng 0,1–4 giây, rồi sao chép giá trị cubic-bezier() cho transition và animation.
Trình tạo glassmorphism CSS
CSS Glassmorphism Generator
Cân bằng độ mờ, nhòe hậu cảnh, bão hòa và viền của bảng kính mờ trên nền thật, rồi sao chép quy tắc .glass-panel với backdrop-filter kèm bản -webkit-.
Trình tạo hiệu ứng glitch chữ CSS
CSS Text Glitch Effect Generator
Tạo hiệu ứng chữ glitch ba lớp với kênh cyan và đỏ, độ lệch 1–12 px và chu kỳ 0,2–3 giây. Bản xuất kèm data-text và khối prefers-reduced-motion.
Trình tạo gradient CSS
CSS Gradient Generator
Tổ hợp gradient tuyến tính hoặc tỏa tròn với góc 0–360 độ và hai điểm dừng tường minh — kể cả sọc mép cứng — rồi sao chép khai báo background một dòng.
Trình tạo tam giác CSS
CSS Triangle Generator
Tạo tam giác cân bằng kỹ thuật viền CSS theo bốn hướng, đáy và cao 8–180 px, sắc nét ở mọi mật độ màn hình. Sao chép quy tắc .triangle hoàn chỉnh.
Trình tạo đổ bóng CSS
CSS Box Shadow Generator
Chỉnh độ lệch, nhòe, lan, màu và độ mờ của bóng trên thẻ xem trước trực tiếp, kể cả chế độ inset, rồi sao chép khai báo box-shadow chính xác.
Trình tạo border-radius CSS
CSS Border Radius Generator
Tạo dáng bốn góc bo theo pixel hoặc phần trăm, liên kết hoặc tách từng góc cho hình lá và blob, rồi sao chép khai báo border-radius bốn giá trị tường minh.
Trình tạo màu hài hòa
Color Harmony Builder
Sinh bảng năm màu từ một màu gốc theo sáu quy tắc hài hòa, với tỷ lệ tương phản theo mục tiêu 3:1, 4.5:1 hoặc 7:1. Engine xác định, xuất CSS và JSON.
HEX sang RGBA
HEX to RGBA Converter
Giải mã màu #RGB, #RGBA, #RRGGBB và #RRGGBBAA thành rgba() với alpha chính xác theo byte chia 255, kèm mẫu màu trực tiếp và từng kênh để rà soát.
RGBA sang HEX
RGBA to HEX Converter
Chuyển ký hiệu rgb() và rgba() sang HEX viết hoa, giữ độ trong suốt dưới dạng byte alpha tám chữ số khi alpha dưới 1. Kênh phần trăm bị từ chối.
Trình tạo sắc độ màu
Color Shades Generator
Sinh thang 3–20 sắc độ xác định quanh một màu nền tảng ghim ở giữa, không bao giờ chạm đen hay trắng thuần. Xuất custom property CSS tên đánh số ổn định.
Trộn màu
Color Mixer
Trộn hai màu hex — kể cả bán trong suốt — trong sRGB với trọng số điều chỉnh được, rồi đọc kết quả dạng HEX, RGBA và CSS hoặc tải xuống JSON.
Quy trình thiết kế / biến quyết định thị giác thành quy tắc dùng được.
Tinh chỉnh hệ thống và giữ đầu ra tường minh.
Đặt hình học
Điều khiển khoảng cách, bán kính, hoa văn và hình dạng bằng giá trị đo được.
Mở công cụ phù hợpDựng logic màu
Pha, chuyển đổi và so sánh màu với kết quả hiển thị ngay bên cạnh.
Mở công cụ phù hợpMang code theo
Sao chép CSS và token đã tạo mà không phải dựng lại thiết kế.
Mở công cụ phù hợpXây cho công việc tập trung / kết quả hữu ích không cần bước cài đặt.
Ưu tiên trình duyệt, theo đúng thiết kế.
Ưu tiên trình duyệt
Mở tác vụ là dùng. Không cần gói tiện ích hay tài khoản.
Xử lý nhìn thấy được
Thấy đầu vào, kết quả, trạng thái và nhãn thực thi ở mọi bước.
Sẵn sàng xuất
Sao chép hoặc tải xuống kết quả hữu ích mà không phải dọn dẹp.
Danh mục liên quan
Tiếp tục quy trình với một bộ sưu tập tập trung khác.
Ghi chú thiết kế hệ thống
Khiến mọi lựa chọn thị giác đều tái lập được.
Dùng ràng buộc có chủ đích
Bắt đầu từ quy tắc khoảng cách, tỷ lệ hoặc hình học thay vì giá trị tùy ý.
Kiểm tra độ tương phản trong ngữ cảnh
Đánh giá màu trên bề mặt và cỡ chữ nơi chúng sẽ tồn tại.
Đọc CSS đã tạo
Xác minh hỗ trợ trình duyệt và giá trị trước khi đưa đầu ra vào sản xuất.
Có câu hỏi trước khi bắt đầu?
Những công cụ nào trên trang này chạy cục bộ?
Mọi công cụ hiện được liệt kê ở đây đều xử lý đầu vào đang hoạt động trong trình duyệt của bạn, không tải lên. Bất kỳ xử lý đám mây hay kết hợp nào trong tương lai sẽ được cho biết trước khi dùng.
Chuyển đổi có làm thay đổi nguồn của tôi không?
Toolars làm việc trên một bản sao riêng trong trình duyệt. Tệp hay văn bản gốc của bạn không đổi, trừ khi bạn cố tình tải xuống và thay thế nó.
Tôi có thể lưu một công cụ không?
Có. Hãy đăng nhập trước để Toolars lưu mục yêu thích vào tài khoản của bạn và đưa bạn trở lại công cụ đó.
Làm thế nào để báo cáo kết quả sai?
Mỗi trang công cụ đều có chỗ báo cáo. Phản hồi gửi đi chỉ chứa thông điệp và ngữ cảnh trang mà bạn chọn gửi.
Còn thiếu tiện ích nào trong bộ sưu tập này?
Hãy cho chúng tôi biết đầu vào, phép chuyển đổi và kết quả bạn mong đợi.