<div class="gradient srgb"></div>
<div class="gradient hsl"></div>






<div class="no-support">This browser doesn't support specifying gradient colorspaces yet.</div>

@layer demo {
  .srgb {
    background: linear-gradient(to right, blue, white);
  }
  
  .hsl {
    background: linear-gradient(in hsl to right, blue, white);
  }
}

@layer demo.support {
  * {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    block-size: 100%;
    color-scheme: dark light;
  }

  body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;

    display: grid;
    place-content: center;
    gap: 3vmin;
  }
  
  .gradient {
    inline-size: 75vmin;
    aspect-ratio: 16/9;
    border-radius: 30px;
  }
}

.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)) {
  body {
    place-items: center;
  }
  .no-support {
    display: block;
  }
  .gradient {
    display: none
  }
}