เครื่องมือCSS

สร้างโค้ด CSS ที่สะอาดและคัดลอกไปใช้ได้ทันทีแบบเห็นภาพด้วยเครื่องมือฟรีเหล่านี้ — เงากล่อง (box shadow) ไล่ระดับสี (gradient) มุมโค้ง (border-radius) flexbox, grid, แอนิเมชัน clip-path และฟิลเตอร์ — พร้อมตัวอย่างแบบเรียลไทม์ในขณะที่คุณปรับแต่งแต่ละค่า

เครื่องมือสร้าง CSS Box Shadow

ออกแบบ box-shadow แบบเห็นภาพพร้อมพรีวิวสดและคัดลอก CSS ได้ทันที

เครื่องมือสร้าง CSS Border Radius

ปรับรัศมีแต่ละมุมพร้อมพรีวิวสดและคัดลอก CSS ได้ทันที

เครื่องมือสร้าง CSS Gradient

สร้างไล่เฉดสีแบบ linear หรือ radial พร้อมพรีวิวสดและคัดลอก CSS ได้ทันที

เครื่องมือสร้าง CSS Text Shadow

ออกแบบ text-shadow พร้อมพรีวิวสดและคัดลอก CSS ได้ทันที

เครื่องมือสร้าง CSS Triangle

สร้างสามเหลี่ยมด้วย CSS ล้วนในทิศทางใดก็ได้และคัดลอก CSS

เพลย์กราวด์ CSS Flexbox

ทดลองปรับคุณสมบัติ flexbox บนพรีวิวแบบเรียลไทม์ แล้วคัดลอก CSS ที่สร้างขึ้น

ตัวสร้าง CSS Grid

สร้างเลย์เอาต์ CSS grid ที่ปรับจำนวนคอลัมน์ แถว และระยะห่างได้ พร้อมพรีวิวแบบเรียลไทม์

ตัวสร้าง CSS Transform

ผสาน translate, rotate, scale และ skew ให้เป็น CSS transform เดียว พร้อมพรีวิวแบบเรียลไทม์

ตัวสร้าง CSS Easing

เลือกหรือสร้าง easing แบบ cubic-bezier แล้วเล่นซ้ำบนจุดพรีวิวที่เคลื่อนไหว

ตัวสร้าง Glassmorphism

สร้าง CSS การ์ดกระจกฝ้าด้วยเบลอ ความโปร่งใส ความอิ่มสี และสีโทน

เครื่องมือสร้าง CSS clip-path

ตัดองค์ประกอบให้เป็นรูปทรงทั่วไปแล้วคัดลอก CSS clip-path

เครื่องมือสร้าง CSS Filter

ผสมฟิลเตอร์ CSS ด้วยตัวเลื่อนและดูตัวอย่างแบบเรียลไทม์ แล้วคัดลอก

เครื่องมือสร้าง CSS Animation

สร้างแอนิเมชัน keyframe ดูตัวอย่างแบบเรียลไทม์แล้วคัดลอก CSS

เครื่องมือสร้าง CSS Spinner

สร้างตัวโหลดหมุนแบบ CSS ล้วนแล้วคัดลอก CSS

ลวดลายพื้นหลัง CSS

สร้างลวดลายพื้นหลัง CSS จากสองสีแล้วคัดลอก

เครื่องมือสร้าง Neumorphism

สร้างเงาแบบ neumorphic soft-UI พร้อมดูตัวอย่างแบบเรียลไทม์แล้วคัดลอก

เครื่องมือสร้าง CSS Media Query

สร้าง @media query แบบ responsive พร้อมค่าสำเร็จรูปแล้วคัดลอก

ตัวจัดสไตล์แถบเลื่อน CSS

จัดสไตล์แถบเลื่อนเองและคัดลอก CSS ของ ::-webkit-scrollbar

กล่องอัตราส่วนภาพ CSS

สร้างกล่องอัตราส่วนภาพแบบ responsive พร้อมการรองรับสำรองด้วย padding

เลย์เอาต์หลายคอลัมน์ CSS

สร้างเลย์เอาต์ข้อความหลายคอลัมน์ด้วย CSS พร้อมเส้นแบ่ง

เส้นขอบตัวอักษร CSS

เพิ่มเส้นขอบหรือเส้นรอบรูปให้ตัวอักษรและคัดลอก CSS

ไม่มีเครื่องมือที่ตรงกับนั้น

เรียกดูหมวดหมู่อื่น ๆ