Linear Gradient in CSS3 to provide awesome Backgrounds effects to Menus and Divs

  1. Previous
  2. Next
  3. Recent

    1. Signs 'He' May be Cheating on You
    2. 7 Vows of Hindu Marriage - Know What 'Saat Vachans' Mean
    3. RuPay vs Visa vs Mastercard vs American Express- A Comparison
    4. What is RuPay? Everything You Need to Know About India's Domestic Payment System!
    5. Top 10 Online Portals to Find a High Paying Job in India
    6. Top Indians who Revolutionized the IT Sector in India
    7. 8 Initiatives by Narendra Modi that Could Change the Future of the Nation
    8. 8 Work-from-home Jobs for Housewives, Students, and Part timers
    9. Complete Company Registration Process in India - Explained
    10. Change Name in India in 5 Steps - Filing Affidavit, Newspaper Ad & Gazette Notification

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,

The Code

<div id='linear-gradient-box'></div>

<style>
#linear-gradient-box
{
width:600px;
height:200px;
background-image:-moz-linear-gradient(#CD0000, #FF1A00);
background-image:-webkit-linear-gradient(#00A0D1, #008DB8);
background-image:linear-gradient(#CD0000, #FF1A00);
border:1px solid black;
}
</style>

Basic syntax of CSS3 linear gradient property

syntax for linear gradient feature in css3

Here is how a gradient appears in a div,

how linear gradient appears in webpage using css3

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.

  1. Linear gradient syntax in Mozilla firefox: background-image: -moz-linear-gradient(#CD0000, #FF1A00)
  2. Linear gradient syntax in webkit browsers like Chrome and Safari: background-image: -webkit-linear-gradient(#CD0000, #FF1A00)
  3. 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.

blog comments powered by Disqus