Công cụ Thiết kế — Miễn phí trực tuyến
13 công cụCông cụ thiết kế và CSS: chọn màu, tạo gradient, tạo shadow và tiện ích CSS.
Kiểm tra tương phản WCAG & APCA
Kiểm tra khả năng tiếp cận màu với tỷ lệ WCAG 2.1 và điểm APCA hiện đại cùng mô phỏng trực quan thời gian thực.
Tạo hoạt ảnh CSS
Thiết kế trực quan hoạt ảnh keyframe hiệu suất cao với xem trước trực tiếp và điều khiển easing.
Tạo CSS Border Radius
Tạo trực quan border radius CSS 8 điểm nâng cao. Thiết kế hình tròn, hình dạng hữu cơ và hình phức tạp.
Tạo CSS Box Shadow
Thiết kế trực quan bóng đổ CSS nhiều lớp nâng cao với xem trước thời gian thực và hỗ trợ inset.
Tạo CSS Filter
Áp dụng bộ lọc CSS thời gian thực như blur, contrast và brightness cho ảnh với xem trước trực tiếp và xuất mã.
Tạo CSS Flexbox
Thiết kế trực quan bố cục linh hoạt với sandbox tương tác cho thuộc tính container và item.
Tạo CSS Grid
Thiết kế trực quan bố cục 2D phức tạp. Kéo để tạo vùng lưới, điều chỉnh track và xuất CSS sạch.
Chuyển đổi PX ↔ REM
Chuyển đổi hai chiều px/rem với khớp Tailwind CSS, tạo typography fluid clamp() và chuyển đổi CSS hàng loạt.
Chuyển SVG sang CSS
Chuyển icon SVG sang CSS data URI tối ưu với định dạng đầu ra background-image, mask-image và Tailwind.
Tạo Favicon
Tạo favicon từ văn bản, emoji hoặc ảnh ở định dạng ICO, PNG, SVG và gói PWA với hỗ trợ chế độ tối.
Tạo CSS Gradient
Tạo gradient CSS đẹp mắt với trình soạn trực quan hỗ trợ kiểu tuyến tính, xuyên tâm và hình nón với nội suy OKLCH và phủ kết cấu hạt.
Tạo bảng màu
Tạo bảng màu hài hòa trong OKLCH với sáu chế độ hài hòa, ma trận tương phản WCAG và xuất CSS/Tailwind/JSON.
Chọn màu
Chọn màu với canvas HSV tương tác, chuyển đổi giữa HEX, RGB, HSL và OKLCH, và kiểm tra tỷ lệ tương phản WCAG với trắng và đen.