⌕ ค้นหา

สร้างพื้นหลังไล่สีและโค้ด CSS

สร้างพื้นหลังไล่สีและโค้ด CSS — รับ 2–12 จุด เรียงตำแหน่งจากน้อยไปมาก Radial ใช้วงรีกึ่งกลาง ไม่รับ CSS ดิบ

ประมวลผลบนอุปกรณ์มีคำอธิบายและตัวอย่างมีนโยบายความเป็นส่วนตัว

สร้างพื้นหลังไล่สีและโค้ด CSS

กรอกข้อมูลหรือเลือกไฟล์ แล้วกดประมวลผล

Local Processing

Result

▤

ผลลัพธ์การคำนวณ

กรอกข้อมูลแล้วกดคำนวณ เพื่อดูผลลัพธ์และรายละเอียดที่นี่

วิธีใช้และการอ่านผล

สร้างโค้ดพื้นหลังไล่สี Linear หรือ Radial จากจุดสีที่กำหนด พร้อมภาพตัวอย่างสำหรับคัดลอกไปใช้ใน CSS ไม่เปลี่ยนสีของเว็บไซต์ให้โดยอัตโนมัติ

กรอกข้อมูลอย่างไร

เลือกชนิดไล่สี ใส่หนึ่งสีต่อบรรทัดในรูป #HEX ตำแหน่ง เช่น #FF5018 0 และ #235AFF 100 เรียงตำแหน่งจากน้อยไปมาก ถ้าเป็น Linear จึงกำหนดมุม แล้วคัดลอกโค้ดผลลัพธ์

อ่านผลและข้อจำกัด

รับ 2–12 จุดสี HEX ตำแหน่ง 0–100% ไม่รับ CSS ดิบ สีโปร่งใส หรือ Conic gradient มุมมีผลเฉพาะ Linear ภาพตัวอย่างไม่ได้ยืนยันว่าอ่านตัวอักษรบนพื้นหลังได้ชัดทุกตำแหน่ง

หลักการทำงาน

Linear: background: linear-gradient(มุมdeg, สี ตำแหน่ง%, ...);
Radial: background: radial-gradient(ellipse at center, สี ตำแหน่ง%, ...);

ตัวอย่างการใช้งาน

Linear มุม 90° และจุด #FF5018 0 กับ #235AFF 100 ได้ background: linear-gradient(90deg, #FF5018 0%, #235AFF 100%); สีเปลี่ยนจากซ้ายไปขวา ถ้าเลือก Radial จะไล่จากศูนย์กลางออกด้านนอก

ข้อมูลและการตรวจสอบ

แหล่งอ้างอิงที่ตรวจสอบได้

แหล่งข้อมูลประกอบหลักการและสูตร ไม่ใช่การรับรองผลลัพธ์จากหน่วยงานอ้างอิง และไม่ใช้แทนคำแนะนำเฉพาะกรณี

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

คำถามที่พบบ่อยเกี่ยวกับ สร้างพื้นหลังไล่สีและโค้ด CSS

มุม Linear หมายถึงอะไร?

มุมตามรูปแบบ CSS ใช้เฉพาะ Linear 90° ไล่ไปทางขวา โหมด Radial ไม่ใช้ค่ามุมนี้

หนึ่งบรรทัดต่อสี: HEX ตำแหน่ง% หมายถึงอะไร?

หนึ่งบรรทัดต่อหนึ่งจุดสี #000000 0 ตามด้วย #FFFFFF 100 เป็นไล่ดำไปขาว ตำแหน่งต้องเรียงและอยู่ในช่วง 0–100

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

แนะนำอัตโนมัติจากหมวดหมู่และ Tags ที่เกี่ยวข้อง

แปลงรหัสสี HEX RGB และ HSL

แปลงรหัสสี HEX RGB และ HSL — ไม่รองรับ alpha หรือ CMYK และอาจมีความคลาดเคลื่อนจากการปัด RGB

เปิดเครื่องมือ →

แปลง Markdown เป็น HTML พร้อมตัวอย่าง

แปลง Markdown เป็น HTML พร้อมตัวอย่าง — ไม่รัน JavaScript ไม่โหลดรูปหรือสื่อภายนอก ไม่รองรับ HTML ฝังเอง ตาราง ลิงก์และโค้ดรองรับตาม Marked; preview อยู่ใน sandbox

เปิดเครื่องมือ →

จัดรูปแบบและตรวจ XML

จัดรูปแบบและตรวจ XML — ตรวจไวยากรณ์ XML ไม่ตรวจ XSD/DTD ไม่ดึงไฟล์ภายนอก ปฏิเสธ DOCTYPE และ ENTITY จำกัด 100 KB / 100 ชั้น

เปิดเครื่องมือ →

บทความ คู่มือ และคำศัพท์ที่เกี่ยวข้อง

อ่านต่อเพื่อเข้าใจสูตร กรอกข้อมูล และใช้ผลลัพธ์ได้อย่างมั่นใจขึ้น

ดูทั้งหมด →
ภาพประกอบ สร้างพื้นหลังไล่สีและโค้ด CSS: ตำแหน่งจุดสีเป็นสัดส่วน ไม่ใช่ความเข้ม บทความ

สร้างพื้นหลังไล่สีและโค้ด CSS: ตำแหน่งจุดสีเป็นสัดส่วน ไม่ใช่ความเข้ม

ตำแหน่ง 0% คือจุดเริ่มและ 100% คือจุดท้ายของแนวไล่สี สีที่อยู่ระหว่างจุดจะถูกคำนวณผสมโดยเบราว์เซอร์ ส่วนมุมมีผลกับ linear gradient แต่ radial ของเครื่องมือนี้กำหนดเป็นวงรีกึ่งกลาง

อ่านต่อ →ภาพประกอบ วิธีใช้สร้างพื้นหลังไล่สีและโค้ด CSS คู่มือ

วิธีใช้สร้างพื้นหลังไล่สีและโค้ด CSS

กรอกสองบรรทัด #FF5018 0 และ #235AFF 100 เลือก Linear มุม 90° แล้วตรวจตัวอย่าง เพิ่มสีที่ 50 เพื่อแทรกจุดกลาง ต้องเรียงตำแหน่งไม่ลดลง

อ่านต่อ →