Thread: Gradient

  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Pabna, Bangladesh
    Rep Power


    Hi Everybody,

    Good day
    Please see the following code and response.

    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
    1st line webkit-gradient(linear, left top, left bottom,
    2nd line -moz-linear-gradient(top and
    3rd line background: linear-gradient(-90deg,

    No more, I am waiting for your kind response.

    Thank you
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Rep Power
    gradients tell browsers to display the background color as a smooth transition from one color to another.

    The differences of the three lines is because the feature is a relatively new standard. Webkit, and later mozilla implemented a version before the standard came into existence so came up with their own way of specifying the gradients.

    The good news is all modern browsers implement the CSS3 linear-gradient, so IMO you can ignore the -moz, and -webkit versions. Just make sure there is a reasonable fall back for folks with old IE browsers.

IMN logo majestic logo threadwatch logo seochat tools logo