ระบบชำระเงิน PromptPay ที่คนไทยส่วนใหญ่ใช้สแกน QR Code จ่ายเงินทุกวัน ใช้โทนสีฟ้าไล่เฉดเป็นส่วนหนึ่งของอัตลักษณ์แบรนด์ — ตัวอย่างที่คุ้นตาว่าเกรเดียนต์ไม่ได้เป็นแค่ลูกเล่นตกแต่ง แต่กลายเป็นส่วนหนึ่งของภาพจำระดับประเทศไปแล้ว
สามวิธีที่ CSS กระจายสี
linear-gradient(45deg, red, blue) ยืดสีไปตามแนวเส้นตรงในมุมที่กำหนด — ประเภทที่พบบ่อยที่สุดสำหรับพื้นหลังปุ่ม แบนเนอร์ และการ์ด radial-gradient(circle, yellow, orange) กระจายสีเป็นวงกลมหรือวงรีซ้อนกันจากจุดหนึ่งออกไปด้านนอก เหมาะกับเอฟเฟกต์จุดแสง conic-gradient(red, yellow, green, blue, red) หมุนสีรอบจุดศูนย์กลางคล้ายเข็มนาฬิกา และเป็นประเภทเดียวที่สร้างแผนภูมิวงกลมหรือตัวบ่งชี้ความคืบหน้าแบบวงแหวนได้โดยไม่ต้องใช้กราฟิกเพิ่มเติม
Color stops และลวดลายที่ทำซ้ำ
สีแต่ละสีสามารถผูกกับตำแหน่งเปอร์เซ็นต์ที่กำหนดได้ เช่น linear-gradient(red 0%, yellow 50%, blue 100%) เพื่อควบคุมว่าการเปลี่ยนสีจะฉับพลันแค่ไหน ฟังก์ชัน repeating-linear-gradient() และ repeating-radial-gradient() จะทำซ้ำลำดับ color stops เดิมโดยอัตโนมัติ สร้างลวดลายแถบหรือตารางหมากรุกได้ด้วย CSS เพียงบรรทัดเดียว
เหตุใดจึงจำเป็น
- เลือกและคัดลอกโค้ด CSS เกรเดียนต์ที่พร้อมใช้งานได้อย่างรวดเร็ว โดยไม่ต้องคำนวณมุมและสีด้วยมือ
- เข้าใจว่าเกรเดียนต์ประเภทใดเหมาะกับเอฟเฟกต์ภาพที่ต้องการ
- ปรับตำแหน่งของ color stops อย่างแม่นยำเพื่อให้ได้การไล่สีตามต้องการ
จากดีไซน์แบนราบสู่การกลับมาของเกรเดียนต์
หลังจากยุคดีไซน์แบนราบ (flat design) ที่ iOS 7 จุดกระแสไว้ในปี 2013 เกรเดียนต์ก็กลับมาโดดเด่นอีกครั้งในวงการดีไซน์ดิจิทัลไม่กี่ปีต่อมา การรีแบรนด์ของ Instagram ในปี 2016 เปลี่ยนไอคอนกล้องแบบเก่าให้เป็นโลโก้ไล่สีส้ม-ม่วง และสไตล์นี้ก็ส่งอิทธิพลต่อโลโก้และแอปฟินเทคจำนวนมากในเวลาต่อมา ไม่ต่างจากที่ PromptPay เลือกใช้เกรเดียนต์สีฟ้าเป็นเอกลักษณ์ของตัวเอง