เครื่องมือออกแบบ — ฟรีออนไลน์
13 เครื่องมือเครื่องมือออกแบบและ CSS: เลือกสี สร้างไล่สี สร้างเงา และยูทิลิตี้ CSS
ตรวจสอบความคมชัด WCAG และ APCA
ตรวจสอบการเข้าถึงสีด้วยอัตราส่วน WCAG 2.1 และคะแนน APCA สมัยใหม่พร้อมจำลองภาพแบบเรียลไทม์
สร้างแอนิเมชัน CSS
ออกแบบแอนิเมชัน keyframe ประสิทธิภาพสูงด้วยตัวอย่างสดและควบคุม easing
สร้าง CSS Border Radius
สร้าง border-radius CSS ขั้นสูง 8 จุดแบบวิชวล ออกแบบวงกลม รูปทรงออร์แกนิก และรูปทรงซับซ้อน
สร้าง CSS Box Shadow
ออกแบบเงา CSS หลายชั้นขั้นสูงแบบวิชวลพร้อมดูตัวอย่างแบบเรียลไทม์และรองรับ inset
สร้าง CSS Filter
ใช้ฟิลเตอร์ CSS แบบเรียลไทม์เช่น blur, contrast และ brightness กับภาพพร้อมดูตัวอย่างสดและส่งออกโค้ด
สร้าง CSS Flexbox
ออกแบบเลย์เอาต์ยืดหยุ่นแบบวิชวลพร้อม sandbox อินเทอร์แอคทีฟสำหรับคุณสมบัติ container และ item
สร้าง CSS Grid
ออกแบบเลย์เอาต์ 2D ซับซ้อนแบบวิชวล ลากเพื่อสร้างพื้นที่กริด ปรับ track และส่งออก CSS สะอาด
แปลง PX ↔ REM
แปลง px/rem สองทางพร้อมจับคู่ Tailwind CSS สร้าง typography แบบ fluid clamp() และแปลง CSS แบบแบตช์
แปลง SVG เป็น CSS
แปลงไอคอน SVG เป็น CSS data URI ที่ปรับปรุงแล้วพร้อมรูปแบบ background-image, mask-image และ Tailwind
สร้าง Favicon
สร้าง favicon จากข้อความ อีโมจิ หรือภาพเป็น ICO, PNG, SVG และ PWA bundle พร้อมรองรับ dark mode
สร้าง CSS Gradient
สร้าง gradient CSS สวยงามด้วยตัวแก้ไขวิชวลรองรับแบบเชิงเส้น วงกลม และกรวยพร้อม OKLCH interpolation และ overlay เนื้อเม็ด
สร้างพาเลตสี
สร้างพาเลตสีกลมกลืนใน OKLCH ด้วย 6 โหมดกลมกลืน เมทริกซ์คอนทราสต์ WCAG และส่งออก CSS/Tailwind/JSON
เลือกสี
เลือกสีด้วย canvas HSV อินเทอร์แอคทีฟ แปลงระหว่าง HEX, RGB, HSL และ OKLCH และตรวจสอบอัตราส่วนคอนทราสต์ WCAG กับขาวและดำ