Hi Everybody,

Good day
Please see the following code and response.

background: #6a6a6a url(images/nav-bar-bg.png) repeat-x;
background: -webkit-gradient(linear, left top, left bottom, from(#b9b9b9), to(#6a6a6a));
background: -moz-linear-gradient(top, #b9b9b9, #6a6a6a);
background: linear-gradient(-90deg, #b9b9b9, #6a6a6a);

Please let me know that what is gradient and linear-gradient? Why takes different values here like
2nd line webkit-gradient(linear, left top, left bottom,
3rd line -moz-linear-gradient(top and
4th line background: linear-gradient(-90deg,

No more, I am waiting for your kind response.

Thank you.

Recommended Answers

Please see the following code and response.

What is the issue?

Please let me know that what is gradient and linear-gradient? Why takes different values here like

Read these 2 article and it will explain the differences:

http://www.css3files.com/gradient/

Jump to Post

All 3 Replies

Check this to have clear understanding about change in gradient and browser compatibility:-

https://developer.mozilla.org/en-US/docs/CSS/linear-gradient

The syntax of linear-gradient has evolved since the first Apple proposal implemented in 2008:

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
In the original syntax, the same function was used to create both linear and radial gradients.

  • background: -webkit-gradient(linear, left top, left bottom, from(#b9b9b9), to(#6a6a6a));// implements both linear and radial gradients
  • background: -moz-linear-gradient(top, #b9b9b9, #6a6a6a); //For old Fx (3.6 to 15)
  • background: linear-gradient(-90deg, #b9b9b9, #6a6a6a);// Standard syntax; must be last

gradients are basically a blend of two colours over a progression of space between the two colours. Linear gradients are when two colours that are paralel to each other blend and merge to produce an attractive colour range in one line.

While creating websites, gradients have been introduced in CSS3 which is not supported by all web browsers. For that purpose, webkits,etc are used according to the kit used by each web browser.

In the code you have given above

background: #6a6a6a url(images/nav-bar-bg.png) repeat-x;

is used for every browser regardless as it supports all browsers.

background: -webkit-gradient(linear, left top, left bottom, from(#b9b9b9), to(#6a6a6a)); is used by google chrome and safari

background: -moz-linear-gradient
is used by Mozilla Firefox

background: linear-gradient(-90deg, #b9b9b9, #6a6a6a);
is used by internet explorer 9

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.