Using a variable inside -moz-linear-gradient breaks the style - css

Question

I try to use custom variables inside my CSS.
Under FireFox: everything is okay.
Under Google Chrome or Microsoft Edge: it works pretty well on linear-gradient but not on -moz-linear-gradient
Here is my code: https://codepen.io/Bronzato1/pen/VwWBJjP?editors=1100
To show you the problem, I created the first class which works as expected and the second class with the usage of a variable inside -moz-linear-gradient breaks the style !
HTML
<div class="first red"></div>
<div class="second red"></div>
CSS
.red {
--custom-color: #FF0000;
}
.first::before{
content:'';
position: absolute;
width: 19rem;
height: 14rem;
background: linear-gradient(128deg, transparent 51%, black 53%, var(--custom-color) 70%, transparent 72%) no-repeat bottom left;
/*FF*/
background: -moz-linear-gradient(128deg, transparent 51%, black 53%, black 70%, transparent 72%) no-repeat bottom left;
background-color: #000000;
}
.second::before{
content:'';
position: absolute;
top: 250px;
width: 19rem;
height: 14rem;
background: linear-gradient(128deg, transparent 51%, black 53%, var(--custom-color) 70%, transparent 72%) no-repeat bottom left;
/*FF*/
background: -moz-linear-gradient(128deg, transparent 51%, black 53%, var(--custom-color) 70%, transparent 72%) no-repeat bottom left;
background-color: #000000;
}

Answer 1

You need to put your prefixed styles above the standard style, e.g.
background: -moz-linear-gradient(...) no-repeat bottom left;
background: linear-gradient(...) no-repeat bottom left;
Otherwise the browser will attempt to use the last valid style, which I believe causes problems since background is a combined style so you end up overwriting your linear-gradient with a -moz-linear-gradient that Chrome doesn't understand.
Working example:
.red {
--custom-color: #FF0000;
}
.first::before {
content: '';
position: absolute;
width: 19rem;
height: 14rem;
background: -moz-linear-gradient(128deg, transparent 51%, black 53%, red 70%, transparent 72%) no-repeat bottom left;
background: linear-gradient(128deg, transparent 51%, black 53%, var(--custom-color) 70%, transparent 72%) no-repeat bottom left;
background-color: #000000;
}
.second::before {
content: '';
position: absolute;
top: 250px;
width: 19rem;
height: 14rem;
background: -moz-linear-gradient(128deg, transparent 51%, black 53%, var(--custom-color) 70%, transparent 72%) no-repeat bottom left;
background: linear-gradient(128deg, transparent 51%, black 53%, var(--custom-color) 70%, transparent 72%) no-repeat bottom left;
background-color: #000000;
}
<div class="first red"></div>
<div class="second red"></div>

Answer 2

Try this:
.red {
--custom-color: #FF0000;
}
.first::before, .second::before{
content:'';
position: absolute;
width: 19rem;
height: 14rem;
background: linear-gradient(128deg, transparent 51%, black 53%, var(--custom-color) 70%, transparent 72%) no-repeat bottom left;
/*FF*/
background: -moz-linear-gradient(128deg, transparent 51%, black 53%, red 70%, transparent 72%) no-repeat bottom left;
background-color: #000000;
}
.second::before{
top: 250px;
}