<!DOCTYPE html>
<html>
<head>
<style>
    div { 
        width: 100px;
        height: 100px;
        border: dashed black 1px;
        display: inline-block;
    }

    :root {
        --transparent-1: rgba(0, 0, 255, 0);
        --transparent-2: rgba(255, 0, 0, 0);
        --transparent-3: rgba(0, 255, 0, 0);
        --transparent-4: rgba(255, 255, 0, 0);

        --opaque-1: rgba(0, 0, 255, 1);
        --opaque-2: rgba(255, 0, 0, 1);
        --opaque-3: rgba(0, 255, 0, 1);
        --opaque-4: rgba(255, 255, 0, 1);

        --partial-1: rgba(0, 0, 255, 0.5);
        --partial-2: rgba(255, 0, 0, 0.5);
        --partial-3: rgba(0, 255, 0, 0.5);
        --partial-4: rgba(255, 255, 0, 0.5);
    }
    
    #opaque-opaque {
        background-image: linear-gradient(var(--opaque-1), var(--opaque-2));
    }

    #partial-partial {
        background-image: linear-gradient(var(--partial-1), var(--partial-2));
    }

    #transparent-transparent {
        background-image: linear-gradient(var(--transparent-1), var(--transparent-2));
    }

    #transparent-opaque {
        background-image: linear-gradient(var(--transparent-1), var(--opaque-2));
    }

    #transparent-partial {
        background-image: linear-gradient(var(--transparent-1), var(--partial-2));
    }

    #opaque-transparent {
        background-image: linear-gradient(var(--opaque-1), var(--transparent-2));
    }

    #partial-transparent {
        background-image: linear-gradient(var(--partial-1), var(--transparent-2));
    }

    #opaque-transparent-opaque {
        background-image: linear-gradient(var(--opaque-1), var(--transparent-2), var(--opaque-3));
    }

    #opaque-transparent-partial {
        background-image: linear-gradient(var(--opaque-1), var(--transparent-2), var(--partial-3));
    }

    #partial-transparent-partial {
        background-image: linear-gradient(var(--partial-1), var(--transparent-2), var(--partial-3));
    }

    #partial-transparent-opaque {
        background-image: linear-gradient(var(--partial-1), var(--transparent-2), var(--opaque-3));
    }

    #opaque-transparent-transparent-opaque {
        background-image: linear-gradient(var(--opaque-1), var(--transparent-2), var(--transparent-3), var(--opaque-4));
    }

    #opaque-transparent-transparent-partial {
        background-image: linear-gradient(var(--opaque-1), var(--transparent-2), var(--transparent-3), var(--partial-4));
    }

    #partial-transparent-transparent-partial {
        background-image: linear-gradient(var(--partial-1), var(--transparent-2), var(--transparent-3), var(--partial-4));
    }

    #partial-transparent-transparent-opaque {
        background-image: linear-gradient(var(--partial-1), var(--transparent-2), var(--transparent-3), var(--opaque-4));
    }

    #opaque-transparent-transparent-transparent-opaque {
        background-image: linear-gradient(var(--opaque-1), var(--transparent-2), var(--transparent-3), var(--transparent-4), var(--opaque-2));
    }

    #opaque-transparent-transparent-transparent-partial {
        background-image: linear-gradient(var(--opaque-1), var(--transparent-2), var(--transparent-3), var(--transparent-4), var(--partial-2));
    }

    #partial-transparent-transparent-transparent-partial {
        background-image: linear-gradient(var(--partial-1), var(--transparent-2), var(--transparent-3), var(--transparent-4), var(--partial-2));
    }

    #partial-transparent-transparent-transparent-opaque {
        background-image: linear-gradient(var(--partial-1), var(--transparent-2), var(--transparent-3), var(--transparent-4), var(--opaque-2));
    }

    #opaque-transparent-transparent {
        background-image: linear-gradient(var(--opaque-1), var(--transparent-2), var(--transparent-3));
    }

    #partial-transparent-transparent {
        background-image: linear-gradient(var(--partial-1), var(--transparent-2), var(--transparent-3));
    }

    #transparent-transparent-opaque {
        background-image: linear-gradient(var(--transparent-1), var(--transparent-2), var(--opaque-3));
    }

    #transparent-transparent-partial {
        background-image: linear-gradient(var(--transparent-1), var(--transparent-2), var(--partial-3));
    }

    #transparent-transparent-transparent {
        background-image: linear-gradient(var(--transparent-1), var(--transparent-2), var(--transparent-3));
    }

    #transparent-opaque-transparent {
        background-image: linear-gradient(var(--transparent-1), var(--opaque-2), var(--transparent-3));
    }
    #transparent-partial-transparent {
        background-image: linear-gradient(var(--transparent-1), var(--partial-2), var(--transparent-3));
    }

</style>
</head>
<body>
<div id="opaque-opaque"></div>
<div id="partial-partial"></div>
<div id="transparent-transparent"></div>
<div id="transparent-opaque"></div>
<div id="transparent-partial"></div>
<div id="opaque-transparent"></div>
<div id="partial-transparent"></div>
<div id="opaque-transparent-opaque"></div>
<div id="opaque-transparent-partial"></div>
<div id="partial-transparent-partial"></div>
<div id="partial-transparent-opaque"></div>
<div id="opaque-transparent-transparent-opaque"></div>
<div id="opaque-transparent-transparent-partial"></div>
<div id="partial-transparent-transparent-partial"></div>
<div id="partial-transparent-transparent-opaque"></div>
<div id="opaque-transparent-transparent-transparent-opaque"></div>
<div id="opaque-transparent-transparent-transparent-partial"></div>
<div id="partial-transparent-transparent-transparent-partial"></div>
<div id="partial-transparent-transparent-transparent-opaque"></div>
<div id="opaque-transparent-transparent"></div>
<div id="partial-transparent-transparent"></div>
<div id="transparent-transparent-opaque"></div>
<div id="transparent-transparent-partial"></div>
<div id="transparent-transparent-transparent"></div>
<div id="transparent-opaque-transparent"></div>
<div id="transparent-partial-transparent"></div>
</body>
</html>