การไล่ระดับสีแบบ Conic สามารถใช้เพื่อสร้างเอฟเฟกต์ที่น่าสนใจได้ ดังเช่นตัวอย่างเส้นขอบสวยๆ นี้
CodePen นี้สร้างขึ้นโดย Adam Argyle ซึ่งเดิมทีแชร์ผ่านทวีตนี้ใน Twitter แสดงให้เห็นถึงวิธีใช้การไล่ระดับสีแบบกรวยเพื่อสร้างเส้นขอบ
.conic-gradient-border {
border: 25px solid;
border-image-slice: 1;
border-image-source: conic-gradient(
hsl(100 100% 60%),
hsl(200 100% 60%),
hsl(100 100% 60%)
);
}
Terry Mun แยก Codepen ของ Adam อย่างสร้างสรรค์และสร้าง CodePen ขึ้น เลื่อนเมาส์เหนือองค์ประกอบ แล้วคุณจะเห็นการไล่ระดับสีเปลี่ยนไป เพราะมี JavaScript สั้นๆ ที่อัปเดตพร็อพเพอร์ตี้ที่กำหนดเองของ CSS ที่เก็บมุมการหมุน
ตัวอย่างเหล่านี้ใช้พร็อพเพอร์ตี้ border-image-source พร็อพเพอร์ตี้นี้ตั้งค่ารูปภาพแหล่งที่มาที่ใช้สร้างเส้นขอบขององค์ประกอบ ประเภทการไล่ระดับสี CSS ก็ใช้ได้เช่นกัน เช่นเดียวกับคุณสมบัติอื่นๆ ที่ยอมรับค่ารูปภาพ
border-image-source
การไล่ระดับสีทรงกรวย