Since the moment that digital design took over all of us, gradients have been a recurrent element in the field, witnessing huge popularity periods followed by anti-gradients seasons, but at the end, we all know that a good gradient always looks great when used properly.

Until this point the best way of working with gradients in web design was utilizing repeated images that generate the gradient effect after developing the main picture in a graphic software such as Photoshop or Fireworks, the problem was that if you needed to change any detail of the gradient you were forced to go back to the graphic program and repeat the process all over again.

Now that we have the mighty CSS3 rocking the house, web designers and developers are no longer forced to rely on Photoshop or similar programs to work with gradients because from this moment the magic can be done straight in your CSS. It’s important to state that this and other CSS3 properties are only supported by Opera 11.10+, Firefox 3.6+, Safari 5.03+ and Chrome 7+.

On this guide you will find a complete review of the gradient property that includes both the conceptual part of the subject and the code itself, providing a complete explanation to understand how gradients operate in CSS3. You’re going to find the following topics on this post.

• Creating gradients
• Varying the gradient angle
• Color stops
• Transparency gradients
• Repeating linear gradients
• Great examples

Original link: CSS3 linear gradients