| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset='utf-8'> | |
| <style> | |
| div { | |
| height: 50px; | |
| width: 200px; | |
| } | |
| .has-gradient { | |
| background-image: linear-gradient( | |
| 90deg, | |
| yellow 30%, | |
| purple 95% | |
| ); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h4>These three gradients should NOT look the same</h4> | |
| <p>Interpolating in sRGB (default)</p> | |
| <div class="has-gradient"></div> | |
| <p>Interpolating in HSL</p> | |
| <div class="has-gradient"></div> | |
| <p>Interpolating in Oklch</p> | |
| <div class="has-gradient"></div> | |
| </body> | |
| </html> |