CSS Multiple background with multiple classes

Problem

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">
Problem courtesy of: l2aelba

Solution

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;
}
Solution courtesy of: SW4

Discussion

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.

Discussion courtesy of: torazaburo

This recipe can be found in it's original form on Stack Over Flow.