blob: c319ac465d55a51b69f533ccf316c71a4bb32691 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
border: dashed black 1px;
display: inline-block;
}
#blue-white-none {
background-image: linear-gradient(in oklch, oklch(45% 0.3 265) 0%, oklch(from white l c none) 100%);
}
#white-none-blue {
background-image: linear-gradient(in oklch, oklch(from white l c none) 0%, oklch(45% 0.3 265) 100%);
}
#blue-white-none-red {
background-image: linear-gradient(in oklch, oklch(45% 0.3 265) 0%, oklch(from white l c none) 50%, oklch(60% 0.25 30) 100%);
}
#white-none-red-white-none {
background-image: linear-gradient(in oklch, oklch(from white l c none) 0%, oklch(60% 0.25 30) 50%, oklch(from white l c none) 100%);
}
#blue-black-none {
background-image: linear-gradient(in oklch, oklch(45% 0.3 265) 0%, oklch(from black l c none) 100%);
}
#black-none-blue {
background-image: linear-gradient(in oklch, oklch(from black l c none) 0%, oklch(45% 0.3 265) 100%);
}
#blue-black-none-red {
background-image: linear-gradient(in oklch, oklch(45% 0.3 265) 0%, oklch(from black l c none) 50%, oklch(60% 0.25 30) 100%);
}
#black-none-red-black-none {
background-image: linear-gradient(in oklch, oklch(from black l c none) 0%, oklch(60% 0.25 30) 50%, oklch(from black l c none) 100%);
}
</style>
</head>
<body>
<div id="blue-white-none"></div>
<div id="white-none-blue"></div>
<div id="blue-white-none-red"></div>
<div id="white-none-red-white-none"></div>
<div id="blue-black-none"></div>
<div id="black-none-blue"></div>
<div id="blue-black-none-red"></div>
<div id="black-none-red-black-none"></div>
</body>
</html>