background-gradient-interpolation-003.html (1522B)
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 <!-- The background-clip:text and simple block examples should theoretically render the same, 11 but we allow a slight difference because of different painting codepaths. --> 12 <meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-7100"> 13 <link rel="match" href="background-gradient-interpolation-001.html"> 14 <style> 15 :root { 16 --space: ; 17 } 18 19 .has-gradient { 20 background-image: linear-gradient( 21 90deg var(--space), 22 yellow 30%, 23 purple 95% 24 ); 25 } 26 27 .hsl { 28 --space: in hsl; 29 } 30 31 .oklch { 32 --space: in oklch; 33 } 34 35 .text { 36 font: 50px/1 Ahem; 37 -webkit-background-clip: text; 38 background-clip: text; 39 -webkit-text-fill-color: transparent; 40 text-fill-color: transparent; 41 width: fit-content; 42 margin: 0; 43 } 44 </style> 45 </head> 46 47 <body> 48 <h4>These three gradients should NOT look the same</h4> 49 50 <p>Interpolating in sRGB (default)</p> 51 <p class="text has-gradient">ABCD</p> 52 53 <p>Interpolating in HSL</p> 54 <p class="text has-gradient hsl">ABCD</p> 55 56 <p>Interpolating in Oklch</p> 57 <p class="text has-gradient oklch">ABCD</p> 58 </body> 59 </html>