Created
February 26, 2021 20:34
-
-
Save faceless2/1af496ed83b559ca777185c0b6ad0ad7 to your computer and use it in GitHub Desktop.
LCH gradient demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <style> | |
| .outer { | |
| display:inline-block; | |
| } | |
| .outer div { | |
| width: 100px; | |
| height: 50px; | |
| } | |
| #div1 { | |
| background: lch(75% 67 180deg); | |
| } | |
| #div2 { | |
| background: linear-gradient(lch(75% 67 180deg), lch(75% 101 82deg)); | |
| } | |
| #div2-srgb { | |
| /* Same values as div2 but clipped to sRGB gamut - math from https://css.land/lch/ */ | |
| background: linear-gradient(rgb(0% 81.73% 71.63%), rgb(89.44% 68.9% 0%)); | |
| } | |
| #div3 { | |
| background: lch(75% 101 82deg); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="outer"> | |
| <div id="div1"></div> | |
| <div id="div2"></div> | |
| <div id="div3"></div> | |
| </div> | |
| <div class="outer"> | |
| <div id="div1"></div> | |
| <div id="div2-srgb"></div> | |
| <div id="div3"></div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment