gradient-single-stop-longer-hue-hsl-002-ref.html (622B)
1 <!doctype html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>Gradient in HSL space - reference</title> 7 <link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> 8 <style> 9 body { 10 background: #fff; 11 } 12 13 div { 14 width: 200px; 15 height: 50px; 16 margin: 10px; 17 background-color: red; 18 } 19 </style> 20 </head> 21 22 <body> 23 <div style="--pos: 0%"></div> 24 <div style="--pos: 25%"></div> 25 <div style="--pos: 50%"></div> 26 <div style="--pos: 75%"></div> 27 <div style="--pos: 100%"></div> 28 </body> 29 </html>