<!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>