background-gradient-interpolation-002.html (1287B)
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-002-notref.html"> 11 <style> 12 :root { 13 --space: ; 14 } 15 16 .has-gradient { 17 background-image: linear-gradient( 18 90deg var(--space), 19 yellow 30%, 20 purple 95% 21 ); 22 } 23 24 .hsl { 25 --space: in hsl; 26 } 27 28 .oklch { 29 --space: in oklch; 30 } 31 32 .text { 33 font: 50px/1 Ahem; 34 -webkit-background-clip: text; 35 background-clip: text; 36 -webkit-text-fill-color: transparent; 37 text-fill-color: transparent; 38 width: fit-content; 39 margin: 0; 40 } 41 </style> 42 </head> 43 44 <body> 45 <h4>These three gradients should NOT look the same</h4> 46 47 <p>Interpolating in sRGB (default)</p> 48 <p class="text has-gradient">ABCD</p> 49 50 <p>Interpolating in HSL</p> 51 <p class="text has-gradient hsl">ABCD</p> 52 53 <p>Interpolating in Oklch</p> 54 <p class="text has-gradient oklch">ABCD</p> 55 </body> 56 </html>