<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
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.