ตัวสร้าง CSS Gradient

วิธีใช้งาน

1. เลือก linear, radial หรือ conic จากนั้นกำหนดมุมหรือตำแหน่งจุดศูนย์กลาง
2. กำหนดสี ความทึบแสง และตำแหน่งของจุดหยุดสีแต่ละจุด เพิ่มได้สูงสุดหกจุด หรือลบจุดที่ไม่ต้องการออก
3. ตรวจสอบตัวอย่าง จากนั้นคัดลอกบรรทัด CSS ไปใส่ใน stylesheet

วิธีการทำงาน

ผลลัพธ์เป็น CSS declaration สำหรับ background แบบมาตรฐาน Linear gradient จะไล่สีตามมุม: 0deg ไล่จากล่างขึ้นบน, 90deg จากซ้ายไปขวา และ 180deg จากบนลงล่าง Radial gradient จะแผ่จากจุดศูนย์กลางเป็นวงกลมหรือวงรีที่พอดีกับกล่อง Conic gradient จะไล่สีวนรอบจุดศูนย์กลาง โดยเริ่มจากมุมที่เลือก เหมาะสำหรับเอฟเฟกต์คล้ายแผนภูมิวงกลมและวงล้อสี

จุดหยุดสีจะแสดงตามลำดับตำแหน่ง คุณจึงลากเปลี่ยนตำแหน่งได้อย่างอิสระ จุดหยุดสีที่มีความทึบแสงลดลงจะแสดงเป็น rgba() ทำให้เห็นพื้นหลังด้านล่าง จุดหยุดสีสองจุดที่ตำแหน่งเดียวกันจะเกิดขอบคมแทนการไล่ผสมสี ซึ่งเป็นวิธีสร้างลายแถบ

ฟังก์ชัน gradient ทั้งสามแบบใช้ได้ในเบราว์เซอร์ปัจจุบันทุกตัว โดยค่าเริ่มต้น gradient จะผสมสีในปริภูมิสี sRGB ซึ่งอาจทำให้สีระหว่างสีคู่เติมเต็มดูหม่นลงเล็กน้อย (เช่น สีน้ำเงินกับสีเหลือง) การเพิ่มจุดหยุดสีกลางด้วยสีที่สว่างกว่าจะช่วยแก้ปัญหานี้ได้

ตัวอย่าง

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

ความเป็นส่วนตัว

ทุกอย่างสร้างขึ้นในเบราว์เซอร์ของคุณ สีและการตั้งค่าจะไม่ถูกส่งหรือจัดเก็บ