| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Gradient interpolation</title> |
| <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000"> |
| <link rel="author" title="Mike Bremford" href="mailto:[email protected]"> |
| <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> |
| <meta name="assert" content="A narrow segment of a wide gradient is essentially a single color, allowing for anti-aliasing"> |
| <link rel="match" href="gradient-eval-001-ref.html"> |
| <style> |
| :root { |
| --start: rgb(0% 0% 0%); |
| --end: rgb(0% 100% 0%); |
| --t: 0.5; |
| --big: 131070000px; |
| } |
| .test { |
| width: 100px; |
| height: 100px; |
| background: linear-gradient(var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t)))); |
| } |
| </style> |
| </head> |
| <body> |
| <div class="test"></div> |
| </body> |
| </html> |
