Previously web developers use image to add gradient, rounded corners and shadow effects to menus and divs which can slow down the website. Then launched the CSS3 with awesome features aiming to make websites load and perform faster. Among the various features of CSS3 one is the linear gradient which can provide the same gradient effect with just a single line of code.
Here is an example showing how CSS3 linear gradient works,
border:1px solid black;
Basic syntax of CSS3 linear gradient property
Here is how a gradient appears in a div,
Browser support to CSS3
As CSS3 is the latest addition, most older browsers don’t support it. However, all latest browsers like Mozilla Firefox 3.0+, Chrome, Opera 7.0+, Safari 5.0+ etc support all features of CSS3 but with a minor syntax change.
- Linear gradient syntax in Mozilla firefox: background-image: -moz-linear-gradient(#CD0000, #FF1A00)
- Linear gradient syntax in webkit browsers like Chrome and Safari: background-image: -webkit-linear-gradient(#CD0000, #FF1A00)
- Linear gradient syntax in other browsers like Opera, Maxthon, Avant: background-image: linear-gradient(#CD0000, #FF1A00)
And as always, IE doesn’t support all features of CSS3. However, versions since IE 9.0+ supports CSS3 linear gradient property.
Twitter uses CSS3 in its menu bar, login fields, and in many more components. The menu bar of twitter uses the linear gradient property to provide the amplify the looks.