ตัวสร้างไล่ระดับสี

เกี่ยวกับเครื่องมือนี้

เครื่องมือสร้าง CSS Gradient นี้สร้างการไล่สีแบบ linear, radial และ conic จากสองหรือสามสี พร้อมพรีวิวสดและโค้ด CSS background ที่คัดลอกไปใช้ได้ทันที

วิธีใช้

1. เลือกประเภทการไล่สี: linear, radial หรือ conic
2. ตั้งมุมด้วยสไลเดอร์ (0–360°)
3. เลือกสองสี หรือติ๊ก Use 3 colors เพื่อเพิ่มสีที่สาม
4. คลิก Copy CSS แล้ววางกฎ background ลงในสไตล์ชีตของคุณ

ข้อควรรู้

• linear-gradient() ผสมสีตามแนวเส้นตรงที่กำหนดด้วยมุม โดย 90deg จะไล่จากซ้ายไปขวา
• radial-gradient(circle, …) กระจายสีออกจากจุดศูนย์กลาง
• conic-gradient(from <angle>, …) กวาดสีรอบจุดศูนย์กลาง เหมาะกับแผนภูมิวงกลมและวงล้อสี
• CSS gradient เป็นภาพที่เบราว์เซอร์วาดขึ้นเอง จึงปรับได้ทุกขนาดโดยไม่เพิ่มขนาดไฟล์
• ฟังก์ชัน gradient ทั้งสามแบบรองรับในเบราว์เซอร์หลักทุกตัวในปัจจุบัน

ทำงานในเบราว์เซอร์ของคุณทั้งหมด — ข้อมูลที่คุณป้อนจะไม่ถูกอัปโหลดหรือจัดเก็บ

คำถามที่พบบ่อย