repeating-gradient-hsl-and-oklch-ref.html (1187B)
1 <!doctype html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>Repeating linear gradients in HSL and OKLCH space</title> 7 <link rel="author" title="Ashley Hale" href="mailto:ahale@mozilla.com"> 8 <style> 9 body { 10 background: #fff; 11 } 12 13 .a { 14 width: 100px; 15 height: 100px; 16 background: repeating-linear-gradient( 17 to bottom, 18 hsl(180 50% 70%) 0px 20px, 19 hsl(0 50% 50%) 20px 40px, 20 hsl(180 50% 70%) 40px 60px, 21 hsl(0 50% 50%) 60px 80px, 22 hsl(180 50% 70%) 80px 100px 23 ); 24 } 25 26 .b { 27 width: 100px; 28 height: 100px; 29 background: repeating-linear-gradient( 30 to bottom, 31 oklch(70% 50% 180) 0px 20px, 32 oklch(50% 50% 0) 20px 40px, 33 oklch(70% 50% 180) 40px 60px, 34 oklch(50% 50% 0) 60px 80px, 35 oklch(70% 50% 180) 80px 100px 36 ); 37 } 38 </style> 39 </head> 40 41 <body> 42 <p>repeating-linear-gradient with HSL</p> 43 <div class="a"></div> 44 <p>repeating-linear-gradient with OKLCH</p> 45 <div class="b"></div> 46 </body> 47 </html>