เครื่องมือสร้าง CSS Gradient — เส้นตรง รัศมี และกรวย พร้อมดูตัวอย่างสด

เครื่องมือนี้ทำอะไร

เครื่องมือสร้าง CSS gradient ช่วยให้คุณออกแบบการไล่สีด้วยสายตาแล้วคัดลอก CSS ที่เสร็จแล้วไปใช้ เลือกแบบเส้นตรง แบบรัศมี หรือแบบกรวย เพิ่มจุดสีได้ตามต้องการ ลากตำแหน่ง ตั้งมุมหรือจุดศูนย์กลาง แล้วตัวอย่างจะอัปเดตทันที คุณยังวาง linear-gradient(…), radial-gradient(…) หรือ conic-gradient(…) ที่มีอยู่แล้วเพื่อแก้ไขแบบภาพได้ด้วย ทุกอย่างทำงานในเบราว์เซอร์ของคุณ

วิธีใช้

เริ่มจากพรีเซ็ตหรือใช้ gradient ตัวอย่าง
เลือก ประเภท แบบเส้นตรงและแบบกรวยมีมุม ส่วนแบบรัศมีและแบบกรวยมีจุดศูนย์กลางที่ปรับได้ด้วย ศูนย์กลาง X และ ศูนย์กลาง Y
แก้ไข จุดสี: เปลี่ยนสีด้วยตัวเลือกสีหรือพิมพ์สี CSS ใดก็ได้ ลาก ตำแหน่ง เพื่อย้าย ใช้ + เพิ่มจุดสี เพื่อแทรกในช่องว่างที่กว้างที่สุด และ กลับลำดับ เพื่อสลับลำดับ
เปิด ทำซ้ำ เพื่อให้ gradient ซ้ำเป็นลายทางและวงแหวน
คัดลอกโค้ดจากการ์ด CSS เลือกเพิ่มสีทึบสำรองสำหรับเบราว์เซอร์รุ่นเก่ามากได้

ช่อง CSS ไล่สี ด้านล่างแสดงค่า gradient และแก้ไขได้: วาง gradient จาก stylesheet หรือเครื่องมือออกแบบ แล้วตัวควบคุมจะอ่านค่าให้เอง

ตัวอย่าง

.hero {
  background-color: #667eea;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

เคล็ดลับการทำ gradient ให้สวย

เรียบเข้าไว้ สีสองสีที่ใกล้กัน (น้ำเงินไปม่วง ส้มไปชมพู) ไล่ได้นุ่มกว่าสีตรงข้าม ซึ่งอาจกลายเป็นสีเทาหม่นตรงกลาง
เพิ่มจุดสีตรงกลาง เพื่อควบคุมการผสม จุดที่สามที่สว่างกว่าข้าง ๆ เล็กน้อยให้ไฮไลต์นุ่ม ๆ
จุดขอบคมสร้างรูปทรง จุดที่ตำแหน่งเดียวกันทำให้เกิดขอบคม ลายทาง ธง แถบความคืบหน้า และแผนภูมิวงกลมล้วนใช้เทคนิคนี้
ทิศทาง to right เท่ากับ 90deg และ to bottom (ค่าเริ่มต้น) เท่ากับ 180deg มุมนับตามเข็มนาฬิกาจากด้านบน
ข้อความบน gradient ต้องอ่านได้ทั่วทั้ง gradient ตรวจจุดที่สว่างที่สุดและมืดที่สุดกับสีข้อความด้วยเครื่องมือตรวจคอนทราสต์

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

› gradient แบบเส้นตรง แบบรัศมี และแบบกรวยต่างกันอย่างไร?

แบบเส้นตรงไล่สีตามเส้นตรงในมุมที่กำหนด แบบรัศมีแผ่ออกจากจุดศูนย์กลางเป็นวงกลมหรือวงรี แบบกรวยหมุนรอบจุดศูนย์กลางเหมือนเข็มนาฬิกา เหมาะกับวงล้อสีและแผนภูมิวงกลม

› จะทำแถบสีขอบคมแทนการไล่สีนุ่ม ๆ ได้อย่างไร?

ให้จุดสีสองจุดที่อยู่ติดกันมีตำแหน่งเดียวกัน เช่น red 50% และ blue 50% สีจะเปลี่ยนทันทีที่จุดนั้น เปิด ทำซ้ำ เพื่อให้ลวดลายซ้ำต่อกัน ซึ่งเป็นวิธีทำลายทางด้วย CSS

› ใช้สีโปร่งใสได้ไหม?

ได้ พิมพ์สี CSS ใดก็ได้ลงในจุดสี รวมถึง rgba(), hsl() ที่มีค่า alpha, hex 8 หลัก หรือ transparent ตัวเลือกสีจะคงค่า alpha ที่ตั้งไว้ และตัวอย่างจะแสดงลายตารางหมากรุกหลังส่วนที่โปร่งใส

› ยังต้องใช้ vendor prefix หรือสีสำรองอยู่ไหม?

ไม่ต้องใช้ prefix: เบราว์เซอร์ปัจจุบันทุกตัวรองรับ gradient แบบเส้นตรง รัศมี และกรวยโดยไม่ต้องมี prefix สีทึบสำรองที่เลือกได้มีประโยชน์เฉพาะกับเบราว์เซอร์รุ่นเก่ามากหรือโปรแกรมที่อ่านแค่ background-color เช่นโปรแกรมอีเมลบางตัว