background-gradient-interpolation-001.html (1116B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset='utf-8'> 5 <meta name="assert" content="Use the indicated color space when interpolating colors on the gradient line."> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 7 <link rel="help" href="https://drafts.csswg.org/css-images-4/#linear-gradients"> 8 <link rel="help" href="https://drafts.csswg.org/css-color/#interpolation-space"> 9 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1910153"> 10 <link rel="mismatch" href="background-gradient-interpolation-001-notref.html"> 11 <style> 12 :root { 13 --space: ; 14 } 15 16 div { 17 height: 50px; 18 width: 200px; 19 } 20 21 .has-gradient { 22 background-image: linear-gradient( 23 90deg var(--space), 24 yellow 30%, 25 purple 95% 26 ); 27 } 28 29 .hsl { 30 --space: in hsl; 31 } 32 33 .oklch { 34 --space: in oklch; 35 } 36 </style> 37 </head> 38 39 <body> 40 <h4>These three gradients should NOT look the same</h4> 41 42 <p>Interpolating in sRGB (default)</p> 43 <div class="has-gradient"></div> 44 45 <p>Interpolating in HSL</p> 46 <div class="has-gradient hsl"></div> 47 48 <p>Interpolating in Oklch</p> 49 <div class="has-gradient oklch"></div> 50 </body> 51 </html>