CSS Gradient คืออะไร?
สร้างไล่สีแบบเชิงเส้น แบบรัศมี และแบบกรวย พร้อมจุดสีลากได้ โหมดผสมสี และ CSS ที่พร้อมใช้.
CSS Gradient คือภาพที่เบราว์เซอร์สร้างจากการไล่สีอย่างนุ่มนวลระหว่างสีต่าง ๆ เนื่องจากคำนวณตอนเรนเดอร์ จึงย่อ-ขยายได้ทุกขนาดโดยไม่แตกและไม่ต้องมีไฟล์ภาพ
มี 3 ประเภทหลัก: แบบเชิงเส้น (ทิศทางหรือมุม), แบบรัศมี (วงกลมหรือวงรีจากจุดศูนย์กลาง) และแบบกรวย (กวาดรอบจุดศูนย์กลาง) แต่ละ gradient กำหนดด้วยจุดหยุดสี ซึ่งสามารถระบุตำแหน่งและค่าแอลฟาเพื่อควบคุมการผสมสีได้
สามารถซ้อนหลาย gradient ได้โดยคั่นด้วยเครื่องหมายจุลภาคใน background-image และผสมด้วย background-blend-mode เพื่อได้พื้นผิวที่ลึกขึ้น อีกทั้ง CSS ยังรองรับการอินเตอร์โพเลตในพื้นที่สีอย่าง oklch เพื่อให้การเปลี่ยนสีดูนุ่มนวลขึ้น
- Gradient เชิงเส้นเหมาะกับการแสดงแสงและความลึกตามทิศทาง
- Gradient แบบรัศมีและแบบกรวยเหมาะสำหรับสปอตไลต์ วงแหวน และวงล้อสี
- ปรับตำแหน่งจุดหยุดสีเพื่อให้การเปลี่ยนสีคมขึ้นหรือนุ่มขึ้น