Cant use background-color in css - css

Question

so i cant use background-color to change color but if im using background property it works and change the color, why cant just use background-color property?
here's the html file
<div class="flex-row">
<div class="button">4</div>
<div class="button">5</div>
<div class="button">6</div>
<div class="button operator">-</div>
</div>
<div class="flex-row">
<div class="button">1</div>
<div class="button">2</div>
<div class="button">3</div>
<div class="button operator">+</div>
</div>
<div class="flex-row">
<div class="button clear">CE</div>
<div class="button">0</div>
<div class="button equals double">=</div>
</div>
here's the css file
.button{
flex-basis:25%;
font-size: 1.5em;
text-align: center;
padding: 40px;
border: 1px solid black;
background: -webkit-linear-gradient(top, #d2d2d2, #ddd);
cursor: pointer;
}
.operator, .equals, .negative{
background-color: orange;
}

Answer 1

Here's the funny thing: It's working, just not as you'd expect.
The background property always stands in-front of the background-color property. When you say the background color of the element is orange, it works perfectly. But the background property is different, and it covers the background-color of the element. I tried searching for the official term for this, but couldn't find it, so that was my rudimentary explanation. To make this more clear, try setting one of the parameters of the linear gradient to transparent, you'll see that portion of the background reveal the orange background-color. Here's the code that'll make it clearer to you:
.button{
flex-basis:25%;
font-size: 1.5em;
text-align: center;
padding: 40px;
border: 1px solid black;
background: -webkit-linear-gradient(top, transparent, #ddd);
cursor: pointer;
}
.operator, .equals, .negative{
background-color: orange;
}
So no, there's no scalable, simple solution for this, all you can do is change the background of the other elements to orange.

Answer 2

You have to overwrite the gradient.
.button{
flex-basis:25%;
font-size: 1.5em;
text-align: center;
padding: 40px;
border: 1px solid black;
background: -webkit-linear-gradient(top, #d2d2d2, #ddd);
cursor: pointer;
}
.operator, .equals, .negative{
background: -webkit-linear-gradient(top, orange, orange);
}
<div class="flex-row">
<div class="button">4</div>
<div class="button">5</div>
<div class="button">6</div>
<div class="button operator">-</div>
</div>
<div class="flex-row">
<div class="button">1</div>
<div class="button">2</div>
<div class="button">3</div>
<div class="button operator">+</div>
</div>
<div class="flex-row">
<div class="button clear">CE</div>
<div class="button">0</div>
<div class="button equals double">=</div>
</div>