Stacking Gradients

In case you didn’t know you can stack backgrounds in CSS. This is especially useful with gradients. Technically you’re stacking the background-image property but the background shorthand property works just as well. To do this just list all the gradients, colors, images, etc. that you want separated by spaces. The backgrounds will be applied stacked on top of one another with the first being on the top and the last being on the bottom. This can also be useful for a backup background color in case the desired picture doesn’t load. The snippet below shows only two gradients but gives the “button” a glass type sheen and makes it appear 3D.