← เครื่องมือทั้งหมด
การออกแบบและ CSS
สร้างสี ขนาดที่ตอบสนอง และ CSS ที่พร้อมสำหรับการผลิต
สีและการเข้าถึงได้
CSS เลย์เอาต์และเอฟเฟกต์
- เครื่องมือสร้าง Box Shadowลากแถบเลื่อนเพื่อสร้าง box-shadow ซ้อนเลเยอร์เพื่อเพิ่มมิติความลึก และคัดลอก CSS ที่เสร็จสมบูรณ์ได้ทันที
- เครื่องมือสร้าง Gradientสร้างการไล่โทนสีแบบ Linear, Radial หรือ Conic เพิ่มจุดสีและกำหนดทิศทาง จากนั้นคัดลอก CSS ได้ในคลิกเดียว
- เครื่องมือสร้าง Border Radiusปรับมุมแต่ละมุมให้โค้งมนด้วยแถบเลื่อน สร้างรูปทรงหยดน้ำที่เป็นธรรมชาติด้วยโหมดวงรี และคัดลอก CSS ได้ทันที
- เครื่องมือสร้าง Flexboxตั้งค่า flex container และไอเทมภายในด้วยเครื่องมือควบคุมแบบภาพ ดูการตอบสนองของเลย์เอาต์แบบเรียลไทม์ และคัดลอก CSS ได้ในคลิกเดียว
- เครื่องมือสร้าง CSS Gridกำหนดคอลัมน์และแถว ลากเมาส์ผ่านช่องตารางเพื่อวางไอเทม และคัดลอก CSS ของกริดพร้อม HTML ที่ตรงกันได้ในคลิกเดียว
- เครื่องมือสร้าง CSS Cubic Bezierลากแฮนเดิลสองข้างเพื่อปรับแต่งเส้นโค้งความเร็ว สังเกตการเคลื่อนที่ของจุดเปรียบเทียบกับความเร็วคงที่ และคัดลอกค่า cubic-bezier() ไปใช้งาน
- เครื่องมือคำนวณ CSS clamp()กรอกขนาดสำหรับหน้าจอขนาดเล็กและขนาดใหญ่ เพื่อรับค่า clamp() ที่ยืดหยุ่นและปรับขนาดอย่างนุ่มนวลระหว่างช่วงหน้าจอ สำหรับขนาดตัวอักษร, padding, margin หรือ gap
การตรวจสอบฟอนต์และลิขสิทธิ์
หน้าจอ การพิมพ์ และสัดส่วน
- เครื่องมือแปลงพิกเซล / DPIแปลงพิกเซลเป็นนิ้ว, ซม. และ มม. ที่ค่า DPI/PPI ใดๆ — สำหรับทั้งงานออกแบบหน้าจอและงานพิมพ์
- เครื่องคำนวณ PPI หน้าจอป้อนความละเอียดและขนาดหน้าจอเพื่อคำนวณหาความหนาแน่นพิกเซล, ระยะห่างระหว่างพิกเซล, ขนาดจริงทางกายภาพ และข้อมูลอื่นๆ
- เครื่องมือแปลงหน่วย px เป็น rem และ emแปลงหน่วยสลับไปมาระหว่าง px, rem และ em โดยใช้ขนาดตัวอักษรรูทและบริบทของคุณเอง — แก้ไขช่องใดก็ได้ อีกสองช่องจะอัปเดตตามทันทีขณะพิมพ์
ไม่มีเครื่องมือที่ตรงกันในหมวดหมู่นี้