Member Avatar for active-worker

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.

  • 4 Contributors
  • 3 Replies
  • 159 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by crescendo
Member Avatar for IIM

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
Member Avatar for crescendo

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 developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.