Understanding CSS3 linear gradients

Creating an image just to display a gradient is inflexible and can quickly become a bad practice. But sadly, as of this writing, it may still have to be, but hopefully not for much longer. Thanks to Firefox and Safari/Chrome, we can now achieve powerful gradients with minimal effort. In this article, we will show a simple implementation of CSS gradients and how this property differs in Mozilla and webkit browsers.

PS: The original text of this article provides a video, but due to well-known reasons, we cannot watch this video on Youtube. Students who want to watch it, please find a way to watch it yourself (up to 720P): http://www.youtube.com/ watch?v=9D2hyM5SSCE

Webkit

Although Mozilla and Webkit generally adopt the same syntax for CSS3 properties, they unfortunately cannot agree on gradients. Webkit is the first browser kernel to support gradients, using the following structure:

/* Syntax, taken from: http://webkit.org/blog/175/introducing-css-gradients/ */
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

/* In practice... */
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));