Add a transparent gradient over a solid background

Question

I'm looking for a way to create a modular gradient that could be applied to any number of items by adding it as a LESS mixin.

For example, say you have a flat red button that you want to apply a gradient too. Instead of picking your base red color and a darker red color to fade to in the gradient, I'd like to overlay a black gradient (where the top part is transparent) on the flat red button background. Althought it's only one color (black), the fading causes an illusion that it's fading from black to red. In theory you could overlay this same gradient mixin over multiple items in one way. Instead of having to define a ton of different gradient values.

Here's sample code in pure css of how I think it should work but doesn't:

.btn {
 background: red;
 background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1)), color-stop(1,black));

}

This code will result in the gradient (black) being loaded. The red does not show through unless it is set to the background div or body colour. I want to attach it to the same class. Here's the LESS version:

.gradient (@startColor: fade(@black, 0%), @endColor: fade(@black, 50%)) {
 background-color: @black;
 background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor), color-stop(1,#000000));

}

The closest I've been able to get to what I want to do is to set the background color to red, then lay the semi-transparent gradient over that. However, I'd like to have the target color right on the inline button, etc... Here's a fiddle showing the transparent gradient over a coloured background.

Is it possible to attach the color value to the background of the actual item (button)? with the gradient loading on top?

Answer 1

In the code you provided, the second background declaration completely replaces the first one because you used the shorthand background property rather than just setting the background-image to a gradient. You can combine the background-color in the first and the background-image in the second into a single background declaration:

.btn {
    background: red -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1)));
}

JSFiddle

Answer 2

Is this what you was thinking of http://jsfiddle.net/kevinPHPkevin/G55ya/1/

<div>
    <a class="btn">button</a>
</div>

It's basically assigning the color to a div not the body