เครื่องมือออกแบบและ CSS

สร้างการไล่สี CSS เงา และมุมโค้งมน พร้อมตรวจสอบความคมชัดของสีสำหรับเว็บไซต์ เครื่องมือ 17 รายการ — ทำงานในเบราว์เซอร์ของคุณทั้งหมด.

ทำงานในเครื่องทั้งหมด

ตรวจสอบคอนทราสต์สี

ตรวจสอบว่าคู่สีตัวอักษรกับพื้นหลังผ่านมาตรฐานคอนทราสต์ WCAG เพื่อการเข้าถึงหรือไม่

เครื่องมือออกแบบและ CSSเปิดเครื่องมือ

ทำงานในเครื่องทั้งหมด

สร้าง CSS Gradient

ออกแบบไล่สี CSS แบบเส้นตรงหรือรัศมีด้วยภาพตัวอย่างสด แล้วคัดลอกโค้ดไปใช้ได้ทันที

เครื่องมือออกแบบและ CSSเปิดเครื่องมือ

ทำงานในเครื่องทั้งหมด

สร้าง CSS Box Shadow

ออกแบบเงา box-shadow ของ CSS ด้วยแถบเลื่อนแบบเห็นผลทันที แล้วคัดลอกโค้ดไปใช้

เครื่องมือออกแบบและ CSSเปิดเครื่องมือ

ทำงานในเครื่องทั้งหมด

สร้าง CSS Border Radius

ออกแบบมุมโค้งของกล่อง รวมถึงทรงไม่สมมาตร แล้วคัดลอกโค้ด CSS ไปใช้

เครื่องมือออกแบบและ CSSเปิดเครื่องมือ

ทำงานในเครื่องทั้งหมด

แปลงหน่วย PX เป็น REM

แปลงหน่วยพิกเซลเป็น rem (และย้อนกลับ) โดยอิงจากขนาดฟอนต์หลักที่กำหนดเอง

เครื่องมือออกแบบและ CSSเปิดเครื่องมือ

ทำงานในเครื่องทั้งหมด

ดึงโทนสีจากรูปภาพ

ดึงสีเด่นที่สุดจากรูปภาพใด ๆ พร้อมโค้ดสี HEX, RGB และ CSS

เครื่องมือออกแบบและ CSSเปิดเครื่องมือ

ทำงานในเครื่องทั้งหมด

สร้างภาพสกรีนช็อตโค้ด

วางโค้ดแล้วแปลงเป็นภาพสวย ๆ พร้อมพื้นหลังไล่สีและแถบชื่อไฟล์ พร้อมแชร์ได้ทันที

เครื่องมือออกแบบและ CSSเปิดเครื่องมือ

ทำงานในเครื่องทั้งหมด

จำลองภาวะตาบอดสี

ดูว่าภาพของคุณมีลักษณะอย่างไรในสายตาผู้มีภาวะตาบอดสี (protanopia, deuteranopia, tritanopia หรือ achromatopsia)

เครื่องมือออกแบบและ CSSเปิดเครื่องมือ

ทำงานในเครื่องทั้งหมด

สร้าง CSS Clip-Path

เลือกรูปทรงสำเร็จรูป (วงกลม สามเหลี่ยม ดาว บับเบิลข้อความ...) แล้วคัดลอกโค้ด clip-path ไปใช้

เครื่องมือออกแบบและ CSSเปิดเครื่องมือ

ทำงานในเครื่องทั้งหมด

สร้าง Cubic Bezier Easing

ลากจุดสองจุดเพื่อออกแบบเส้นโค้งการเคลื่อนไหว (easing) แบบกำหนดเองด้วยตาเปล่า แล้วคัดลอกโค้ด cubic-bezier

เครื่องมือออกแบบและ CSSเปิดเครื่องมือ

ทำงานในเครื่องทั้งหมด

สร้าง CSS Glassmorphism

ออกแบบเอฟเฟกต์กระจกฝ้า (frosted-glass) ด้วยภาพตัวอย่างสด แล้วคัดลอกโค้ด CSS ที่พร้อมใช้งาน

เครื่องมือออกแบบและ CSSเปิดเครื่องมือ

ทำงานในเครื่องทั้งหมด

สร้าง CSS Grid และ Flexbox

ออกแบบเลย์เอาต์ Grid หรือ Flexbox ด้วยภาพตัวอย่างสด แล้วคัดลอกโค้ด CSS ที่พร้อมใช้งาน

เครื่องมือออกแบบและ CSSเปิดเครื่องมือ

ทำงานในเครื่องทั้งหมด

แปลงข้อความเป็นลายมือเขียน

เปลี่ยนข้อความที่พิมพ์ให้กลายเป็นภาพลายมือเขียนบนกระดาษเส้น พร้อมสไตล์ลายมือให้เลือก

เครื่องมือออกแบบและ CSSเปิดเครื่องมือ

ทำงานในเครื่องทั้งหมด

สร้าง SVG Blob และลายพื้นหลัง

สร้างทรงบล็อบอินทรีย์แบบสุ่มหรือลายพื้นหลังแบบต่อเนื่องไร้รอยต่อเป็น SVG แล้วคัดลอกหรือดาวน์โหลดได้

เครื่องมือออกแบบและ CSSเปิดเครื่องมือ

ทำงานในเครื่องทั้งหมด

สร้าง CSS Keyframe Animation

ออกแบบแอนิเมชัน CSS ด้วยตาเปล่า (เฟดเข้า เลื่อน ซูม เด้ง หมุน พลิก) แล้วรับโค้ด @keyframes พร้อมใช้งาน

เครื่องมือออกแบบและ CSSเปิดเครื่องมือ

ทำงานในเครื่องทั้งหมด

สร้างชุดสีกลมกลืน

เลือกสีหลักแล้วรับชุดสีที่กลมกลืนกัน (คู่ตรงข้าม ใกล้เคียง ไตรแอด เตตราด โทนเดียว)

เครื่องมือออกแบบและ CSSเปิดเครื่องมือ

ทำงานในเครื่องทั้งหมด

สร้าง Mesh Gradient

สร้างพื้นหลังไล่สีหลายจุดแบบนุ่มนวล (mesh gradient) ในคลิกเดียว พร้อมคัดลอกโค้ด CSS ไปใช้ได้ทันที

เครื่องมือออกแบบและ CSSเปิดเครื่องมือ

เครื่องมือที่เกี่ยวข้อง

เครื่องมือ AI เครื่องมือข้อความ เครื่องมือ PDF เครื่องมือรูปภาพ

เครื่องมือ