Gradient

[Historical Forums User]

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.

[CrocoDillon]

background: -webkit-gradient(linear, left top, left bottom, from(#b9b9b9), to(#6a6a6a));
background: -webkit-linear-gradient(top, #b9b9b9, #6a6a6a);
background: -moz-linear-gradient(top, #b9b9b9, #6a6a6a);
background: -o-linear-gradient(top, #b9b9b9, #6a6a6a);
background: linear-gradient(to bottom, #b9b9b9, #6a6a6a);

First one is old webkit syntax, 2nd to 4th are the usual vendor prefixed syntaxes and 5th is the standardized syntax. Afaik all can be in degrees but I don’t know why you would want that here (maybe save a few bytes), so changed it to the more usual syntax. The different values are a demonstration of how non standard syntaxes can change over time, just deal with it ;)

[rodolpheb]

Tools are available to make your work easier and also to help you to understand:

[tool1](http://www.display-inline.fr/projects/css-gradient/#direction=right&startType=name&startValue=aliceblue&endType=rgba&endValue=255,100,100,1 “Tool1”), [tool2](http://www.colorzilla.com/gradient-editor/ “tool2”)

[Author]

Posts