background-gradient-interpolation-001-notref.html (514B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset='utf-8'> 5 <style> 6 div { 7 height: 50px; 8 width: 200px; 9 } 10 11 .has-gradient { 12 background-image: linear-gradient( 13 90deg, 14 yellow 30%, 15 purple 95% 16 ); 17 } 18 </style> 19 </head> 20 21 <body> 22 <h4>These three gradients should NOT look the same</h4> 23 24 <p>Interpolating in sRGB (default)</p> 25 <div class="has-gradient"></div> 26 27 <p>Interpolating in HSL</p> 28 <div class="has-gradient"></div> 29 30 <p>Interpolating in Oklch</p> 31 <div class="has-gradient"></div> 32 </body> 33 </html>