background-gradient-interpolation-002-notref.html (750B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset='utf-8'> 5 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 6 <style> 7 .has-gradient { 8 background-image: linear-gradient( 9 90deg, 10 yellow 30%, 11 purple 95% 12 ); 13 } 14 15 .text { 16 font: 50px/1 Ahem; 17 -webkit-background-clip: text; 18 background-clip: text; 19 -webkit-text-fill-color: transparent; 20 text-fill-color: transparent; 21 width: fit-content; 22 margin: 0; 23 } 24 </style> 25 </head> 26 27 <body> 28 <h4>These three gradients should NOT look the same</h4> 29 30 <p>Interpolating in sRGB (default)</p> 31 <p class="text has-gradient">ABCD</p> 32 33 <p>Interpolating in HSL</p> 34 <p class="text has-gradient">ABCD</p> 35 36 <p>Interpolating in Oklch</p> 37 <p class="text has-gradient">ABCD</p> 38 </body> 39 </html>