repeating-gradient-hsl-and-oklch.html (1306B)
1 <!doctype html> 2 <html lang="en"> 3 <meta name=fuzzy content="maxDifference=0-1;totalPixels=0-2000"> 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 <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> 9 <meta name="assert" content="Tests that a multi-stop shorter hue gradient and a single-stop longer hue (wrapping) gradient match in appearance"> 10 <link rel="match" href="repeating-gradient-hsl-and-oklch-ref.html"> 11 <style> 12 body { 13 background: #fff; 14 } 15 16 .a { 17 width: 100px; 18 height: 100px; 19 background: repeating-linear-gradient( 20 to bottom, 21 hsl(180 50% 70%) 0px 20px, 22 hsl(0 50% 50%) 20px 40px 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 ); 34 } 35 </style> 36 </head> 37 38 <body> 39 <p>repeating-linear-gradient with HSL</p> 40 <div class="a"></div> 41 <p>repeating-linear-gradient with OKLCH</p> 42 <div class="b"></div> 43 </body> 44 </html>