เครื่องมือสร้างเกรเดียนต์ CSS

เกรเดียนต์เชิงเส้น

background: linear-gradient(135deg, #2563eb, #16a34a);

มุมหมุนตามเข็มนาฬิกาจากด้านบน: 0deg = ขึ้น, 90deg = ขวา, 180deg = ลง, 270deg = ซ้าย คุณยังเขียนทิศทางแบบมีชื่อเองได้: to right เท่ากับ 90deg และ to bottom left เท่ากับ 135deg

เกรเดียนต์แบบรัศมี

background: radial-gradient(circle, #2563eb, #16a34a);

สีกระจายจากศูนย์กลางขององค์ประกอบออกไปด้านนอก เกรเดียนต์แบบรัศมีไม่ใช้มุม เติมคำสำคัญตำแหน่งหรือขนาดด้วยตัวเอง (at 30% 40%, ellipse) เมื่อต้องการควบคุมมากขึ้น

จุดหยุดสี

เกรเดียนต์ CSS รองรับมากกว่าสองสี และแต่ละจุดหยุดสามารถมีตำแหน่งได้:

background: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);

จุดหยุดสองจุดในตำแหน่งเดียวกันจะสร้างขอบแข็ง: สีเปลี่ยนทันทีแทนที่จะค่อยๆ ผสมกัน เหมาะกับพื้นหลังแบบแบ่งครึ่ง

เคล็ดลับ

• เกรเดียนต์จากแดงไปน้ำเงินจะผ่านจุดกึ่งกลางสีเทาเมื่อใช้การประมาณค่า sRGB ตามค่าเริ่มต้น การประมาณค่าใน oklch จะทำให้สีผสมกันสดใส: linear-gradient(in oklch, red, blue) รองรับในเบราว์เซอร์สมัยใหม่
• transparent ไม่ได้ไม่มีสี: ใน sRGB ค่าของมันคือ rgba(0,0,0,0) ดังนั้นการจางหายไปเป็นโปร่งแสงจะผ่านสีเทาเข้ม ให้ใช้ rgba(color, 0) แทน
• เกรเดียนต์ถูกเรนเดอร์บน GPU ในเบราว์เซอร์สมัยใหม่ จึงแทบไม่มีต้นทุนไม่ว่าขนาดใด การทำแอนิเมชันระหว่างเกรเดียนต์ไม่รองรับและเปลี่ยนแบบกระตุก ให้แอนิเมตความทึบของเลเยอร์เสริมแทน
• การเติมสีข้อความ: รวมคำสั่งกับ background-clip: text; color: transparent; เพื่อเติมข้อความด้วยเกรเดียนต์ สำหรับเส้นขอบ border-image: linear-gradient(...) 1; ใช้ได้ในเบราว์เซอร์สมัยใหม่