issue with linear-gradient and css variables

validator objects to style for div4 (only):
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>
    <style>
        :root {
            --color1: #FF0000 ;
            --color2: #0000FF ;
        }
        body {
            display: grid ;
            font-family: Arial, sans-serif ;
            font-size: 3rem ;
            text-align: center ;
            color: white ;
        }
        div{
            width: 30rem ;
            height:10rem ;
            line-height: 10rem ;
            margin: 0.5rem auto ;
        }
        #div1 {
            background-image: linear-gradient(#FF0000, #0000FF) ;
        }
        #div2 {
            background-image: linear-gradient(var(--color1), var(--color2)) ;
        }
        #div3 {
            background-image: linear-gradient(45deg, #FF0000, #0000FF) ;
        }
        #div4 {
            background-image: linear-gradient(45deg, var(--color1), var(--color2)) ;
        }

    </style>
</head>

<body>
    <div id="div1"> Hello world </div>
    <div id="div2"> Hello world </div>
    <div id="div3"> Hello world </div>
    <div id="div4"> Hello world </div>
</body>

</html>

Received on Tuesday, 14 July 2020 09:24:19 UTC