CSS Multiple background with multiple classes - css

Question

HTML :
<div class="blue red"></div>
Blue : If a gradient background from transparent to blue
Red : If a gradient background from red to transparent
Why we can't do something like :
.blue {
background: inherit , background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(125,185,232,1) 100%);
}
.red {
background: linear-gradient(to right, rgba(255,10,10,1) 0%, rgba(255,255,255,0) 100%) , inherit;
}
Instead of :
.blue {
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(125,185,232,1) 100%);
}
.red {
background: linear-gradient(to right, rgba(255,10,10,1) 0%, rgba(255,255,255,0) 100%);
}
.blue.red {
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(125,185,232,1) 100%) , linear-gradient(to right, rgba(255,10,10,1) 0%, rgba(255,255,255,0) 100%);
}
Thats ok if i use only 2 multiple classes, but if I have blue,red,yellow,black,white, bla bla bla.... so you know it bored.
I wonder how to use multiple background with multiple classes ?
Any CSS trick ?
Playground : http://jsfiddle.net/5gJyr/
Expand :
I will use inherit property, gives slot(s) for them
If i have more colors I will add them after like
.red {background: red,inherit,inherit;}
.blue {background: inherit,blue,inherit;}
.yellow {background: inherit,inherit,yellow;}
so I can add given multiple classes like
<div class="red yellow">

Answer 1

Simply put, there is no 'easier way'
inherit works by taking the parent property
The inherit CSS-value causes the element for which it is specified to
take the computed value of the property from its parent element. It is
allowed on every CSS property.
The only way to apply multiple background values is to concatenate them with a comma,
More from MDN
With CSS3, you can apply multiple backgrounds to elements. These are
layered atop one another with the first background you provide on top
and the last background listed in the back. Only the last background
can include a background color.
.myclass {
background: background1, background 2, ..., backgroundN;
}

Answer 2

You cannot add an additional background with an additional class. CSS properties have exactly one value, and they do not accumulate. Even with properties like background where multiple values are permitted, those multiple values are not harvested and aggregated from all applicable classes, they are the ones specified in the one, specific rule that defines background according to the cascade.