On of the most used visual tricks are gradients. With CSS3 you can now do this without needing images. You use it like this:

background: linear-gradient([color1], [color2]);

Now color1 will fade to color2 from the top of the element to bottom. With the different prefixes this is fairly easy to use (top to bottom gradient going from white to black).

background: #000; /* solid color for older browsers */
background: -moz-linear-gradient(#FFF, #000);
background: -o-linear-gradient(#FFF, #000);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#000)); /* older webkit */
background: -webkit-linear-gradient(#FFF, #000);

You can spice it up by using RGBA colors which adds the option of transparency, but as a webdesigner I want to be working with re-usable code. This saves me and my clients time and makes things easier to adjust. So in principle I’d want to extract the gradient from the color.

Since the background declaration will overrule the background-color declaration this might seem impossible, but not if you combine the base color of your gradient and the possibilities of the transparency from RGBA.

background: #55B361; /* solid color for older browsers */
background: #55B361 -moz-linear-gradient(rgba(255,255,255,0.1), rgba(0,0,0,0.1));
background: #55B361 -o-linear-gradient(rgba(255,255,255,0.1), rgba(0,0,0,0.1));
background: #55B361 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.1)), to(rgba(0,0,0,0.1))); /* older webkit */
background: #55B361 -webkit-linear-gradient(rgba(255,255,255,0.1), rgba(0,0,0,0.1));

As you see the color is now added to the background declaration before the gradient is defined. The gradient colors are defined in RGBA which gives you control over the transparency of the gradient colors and to what extend they will mix with the background-color. In the above example I am using a gradient going from white (10% visible) to black (10% visible). Re-using the gradients is now very simple; I just have to replace the background-color and I am done.

Although this is a possibility for many situations, it also has its downside. I works best when using a gradient with the same colors, for instance from black to black or white to white, where you only change the alpha. I had the best results with setting the alpha of the first gradient color to 0 and only adjusting the alpha of the second color.

What do think of this solution? Will you be using it?