| <!doctype html> |
| <html> |
| <head> |
| <meta charset='utf-8'> |
| <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> |
| <style> |
| .has-gradient { |
| background-image: linear-gradient( |
| 90deg, |
| yellow 30%, |
| purple 95% |
| ); |
| } |
| |
| .text { |
| font: 50px/1 Ahem; |
| -webkit-background-clip: text; |
| background-clip: text; |
| -webkit-text-fill-color: transparent; |
| text-fill-color: transparent; |
| width: fit-content; |
| margin: 0; |
| } |
| </style> |
| </head> |
| |
| <body> |
| <h4>These three gradients should NOT look the same</h4> |
| |
| <p>Interpolating in sRGB (default)</p> |
| <p class="text has-gradient">ABCD</p> |
| |
| <p>Interpolating in HSL</p> |
| <p class="text has-gradient">ABCD</p> |
| |
| <p>Interpolating in Oklch</p> |
| <p class="text has-gradient">ABCD</p> |
| </body> |
| </html> |
