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

<div class="hwb"></div>
<div class="lab"></div>
@layer demo {
  .hwb {
    background: linear-gradient(in hwb to right, hwb(250 10% 10%), hwb(150 10% 10%));
  }
  .lab {
    background: linear-gradient(in oklab to right, hwb(250 10% 10%), hwb(150 10% 10%));
  }
}

@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;
    grid-auto-rows: 1fr;
    grid-template-columns: 1fr;
    place-content: center;
  }
}

.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;
  }
  .lab, .hwb {
    display: none
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.