gradient-longer-hue-hsl-009-ref.html (873B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <meta charset="utf-8"> 4 <title>Gradient using "longer hue"</title> 5 <link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> 6 7 <style> 8 div { 9 margin: 20px 0px 20px 50px; 10 height: 40px; 11 width: 100px; 12 position: relative; 13 background: linear-gradient(to right in hsl, 14 red var(--from), 15 color-mix(in hsl longer hue, red, blue), 16 blue var(--to)); 17 } 18 19 .swatch { 20 --from: 50px; 21 --to: 50px; 22 } 23 24 .swatch::before { 25 content: '\feff'; 26 position: absolute; 27 bottom: 40px; 28 height: 10px; 29 left: calc(var(--from) - 0.5px); 30 border: 0.5px solid red; 31 } 32 33 .swatch::after { 34 content: '\feff'; 35 position: absolute; 36 top: 40px; 37 height: 10px; 38 left: calc(var(--to) - 0.5px); 39 border: 0.5px solid blue; 40 } 41 </style> 42 43 <div class="swatch"></div>