ฟังก์ชัน repeating-linear-gradient() ใช้สร้างลายเส้นแบบเส้นตรงซ้ำๆ (striped pattern) โดยไม่ต้องระบุ color-stop หลายจุด ค่าจะทำซ้ำอัตโนมัติตามระยะที่กำหนด
ตัวอย่างโค้ด
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
height: 300px;
background: repeating-linear-gradient(green 20%, orange 40%, maroon 40%);
}
</style>
</head>
<body>
<p>Repeating linear gradient.</p>
<div id="demo"></div>
</body>
</html>
วิธีการทำงาน: ไล่สีจากเขียว (0-20%) ส้ม (20-40%) มารูน (40%) แล้ววนซ้ำรูปแบบเดิมอีกครั้ง ตั้งแต่ 40% เป็นจุดเริ่มต้นของรอบใหม่ (เขียว 40-60%, ส้ม 60-80%, มารูน 80%) และทำซ้ำจนเต็มพื้นที่
การประยุกต์: เหมาะสำหรับสร้างพื้นหลังลายเส้น, loading bar, หรือ decorative pattern แทนการใช้รูปภาพ
