.no-support This browser doesn't support specifying gradient colorspaces yet.

header
  details
    summary Nice to know or be thinking about while scrolling:
    ul
      li These are 2 stop gradients only, specified in hex (sRGB, except 1 in LCH). Adding stops would change the interpolation demonstration. 
      li Specifying colors in HD gamuts would change results. One set of gradients tries intentionally to be gamut wide.
      li Requires CSS gradient syntax supports specifying the colorspace
      li Many of the examples expose problem areas of spaces, and may not portray them in their best
      li Gradients can look different on an HD display where colors arent clipped to sRGB

.black-to-white
  p black to white
  h1 sRGB
  h1 sRGB Linear
  h1 LAB
  h1 okLAB
  h1 LCH
  h1 okLCH
  h1 HSL
  h1 HWB
  h1 XYZ
  h1 xyz-d50
  h1 xyz-d65

.red-to-white
  p red to white
  h1 sRGB
  h1 sRGB Linear
  h1 LAB
  h1 okLAB
  h1 LCH
  h1 okLCH
  h1 HSL
  h1 HWB
  h1 XYZ
  h1 xyz-d50
  h1 xyz-d65

.blue-to-white
  p blue to white
  h1 sRGB
  h1 sRGB Linear
  h1 LAB
  h1 okLAB
  h1 LCH
  h1 okLCH
  h1 HSL
  h1 HWB
  h1 XYZ
  h1 xyz-d50
  h1 xyz-d65
  
.blue-to-black
  p blue to black
  h1 sRGB
  h1 sRGB Linear
  h1 LAB
  h1 okLAB
  h1 LCH
  h1 okLCH
  h1 HSL
  h1 HWB
  h1 XYZ
  h1 xyz-d50
  h1 xyz-d65
  
.red-to-green
  p red to green
  h1 sRGB
  h1 sRGB Linear
  h1 LAB
  h1 okLAB
  h1 LCH
  h1 okLCH
  h1 HSL
  h1 HWB
  h1 XYZ
  h1 xyz-d50
  h1 xyz-d65
  
.purple-to-gold
  p purple to gold
  h1 sRGB
  h1 sRGB Linear
  h1 LAB
  h1 okLAB
  h1 LCH
  h1 okLCH
  h1 HSL
  h1 HWB
  h1 XYZ
  h1 xyz-d50
  h1 xyz-d65
  
.blue-to-red
  p blue to red
  h1 sRGB
  h1 sRGB Linear
  h1 LAB
  h1 okLAB
  h1 LCH
  h1 okLCH
  h1 HSL
  h1 HWB
  h1 XYZ
  h1 xyz-d50
  h1 xyz-d65
  
.short-vs-long-way
  p short vs the long way
  h1 sRGB
  h1 sRGB Linear
  h1 LAB
  h1 okLAB
  h1 LCH
  h1 okLCH
  h1 HSL
  h1 HWB
  h1 XYZ
  h1 xyz-d50
  h1 xyz-d65
  
.extreme-gamut
  p Max LCH chroma
  h1 sRGB
  h1 sRGB Linear
  h1 LAB
  h1 okLAB
  h1 LCH
  h1 okLCH
  h1 HSL
  h1 HWB
  h1 XYZ
  h1 xyz-d50
  h1 xyz-d65
  
.mediumvioletred-to-gold
  p mediumvioletred to gold
  h1 sRGB
  h1 sRGB Linear
  h1 LAB
  h1 okLAB
  h1 LCH
  h1 okLCH
  h1 HSL
  h1 HWB
  h1 XYZ
  h1 xyz-d50
  h1 xyz-d65

.indigo-to-lightseagreen
  p indigo to lightseagreen
  h1 sRGB
  h1 sRGB Linear
  h1 LAB
  h1 okLAB
  h1 LCH
  h1 okLCH
  h1 HSL
  h1 HWB
  h1 XYZ
  h1 xyz-d50
  h1 xyz-d65
  
.same-perceptual-lightness
  p same perceptual lightness origins
  h1 sRGB
  h1 sRGB Linear
  h1 LAB
  h1 okLAB
  h1 LCH
  h1 okLCH
  h1 HSL
  h1 HWB
  h1 XYZ
  h1 xyz-d50
  h1 xyz-d65

h1 {
  --colorspace: srgb;
}

.red-to-white h1 {
  background-image: linear-gradient(
    to right in var(--colorspace), 
    red, hsl(none none 100%)
  );
}

.blue-to-white h1 {
  background-image: linear-gradient(
    to right in var(--colorspace), 
    blue, white
  );
}

.red-to-green h1 {
  background-image: linear-gradient(
    to right in var(--colorspace), 
    red, green
  );
}

.purple-to-gold h1 {
  background-image: linear-gradient(
    to right in var(--colorspace), 
    purple, gold
  );
}

.blue-to-black h1 {
  background-image: linear-gradient(
    to right in var(--colorspace), 
    blue, black
  );
}

.black-to-white h1 {
  background-image: linear-gradient(
    to right in var(--colorspace), 
    black, white 
  );
}

.blue-to-red h1 {
  background-image: linear-gradient(
    to right in var(--colorspace), 
    blue, red
  );
}

.short-vs-long-way h1 {
  /* todo: use syntax to specify angle direction for interpolation */
  background-image: linear-gradient(
    to right in var(--colorspace), 
    hsl(0 50% 50%), hsl(181 50% 50%) 
  );
}

.extreme-gamut h1 {
  background-image: linear-gradient(
    to right in var(--colorspace), 
    lch(50% 230 0), lch(50% 230 250)
  );
}

.mediumvioletred-to-gold h1 {
  background-image: linear-gradient(
    to right in var(--colorspace), 
    mediumvioletred, gold
  );
}

.indigo-to-lightseagreen h1 {
  background-image: linear-gradient(
    to right in var(--colorspace), 
    indigo, lightseagreen
  );
}

.same-perceptual-lightness h1 {
  background-image: linear-gradient(
    to right in var(--colorspace), 
    lch(50% 100 150), lch(50% 100 250)
  );
}

h1:nth-of-type(2) { --colorspace: srgb-linear }
h1:nth-of-type(3) { --colorspace: lab }
h1:nth-of-type(4) { --colorspace: oklab }
h1:nth-of-type(5) { --colorspace: lch }
h1:nth-of-type(6) { --colorspace: oklch }
h1:nth-of-type(7) { --colorspace: hsl }
h1:nth-of-type(8) { --colorspace: hwb }
h1:nth-of-type(9) { --colorspace: xyz }
h1:nth-of-type(10) { --colorspace: xyz-d50 }
h1:nth-of-type(11) { --colorspace: xyz-d65 }

html {
  block-size: 100%;
  color-scheme: dark light;
  font-family: system-ui;
}

body {
  min-block-size: 100%;
  display: grid;
  place-content: center;
  gap: 15vh;
  padding-block: 30vh;
  margin: 0;
}

h1 {
  color: white;
  padding: 1ch;
  margin: 0;
  font-size: 3vh;
}

p, summary {
  margin-block-end: 2vh;
  font-size: 6vh;
  font-weight: 200;
}

li {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.5;
}

header {
  max-inline-size: 70ch;
  margin-inline: auto;
}

.no-support {
  max-inline-size: 35ch;
  text-align: center;
}

@supports (background: linear-gradient(in lch, black, white)) {
  .no-support {
    display: none
  }
}

@supports not (background: linear-gradient(in lch, black, white)) {
  .no-support {
    display: block;
  }
  body { padding: 0 }
  body :not(.no-support) {
    display: none
  }
}