JavaScript - set gradient color

Asked By Deepti Aggarwal on 25-Jan-12 09:56 AM
 hi
I am new to javascript and jquery, can anyone tell me how to set gradient in div tag
gradient colour bottom left : #27384e
gradient colour bottom right : #51637e
pls suggest me what is moz-linear-gradient and webkit-gradient ??
dipa ahuja replied to Deepti Aggarwal on 25-Jan-12 10:16 AM
<style type="text/css">
    BODY
    {
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00A622', endColorstr='#00B726'); /* for IE */
      background: -webkit-gradient(linear, left top, left bottom, from(#00A622), to(#00B726)); /* for webkit browsers */
      background: -moz-linear-gradient(top,  #00A622, #00B726); /* for firefox 3.6+ */
    }
  </style>
  
Riley K replied to Deepti Aggarwal on 25-Jan-12 11:11 AM


You can use jQuery gradient plugin

very simple to use

$(document.ready(function(){
    $('#elem').animateGradient('linear-gradient(red, blue)');
});

http://www.webmuse.co.uk/projects/jquery-gradient-animations-plugin/ 
https://github.com/brandonaaron/jquery-cssHooks/blob/master/gradients.js 
http://blog.jquery.com/2011/05/31/jquery-color-v2-beta-1-released/ 
kalpana aparnathi replied to Deepti Aggarwal on 25-Jan-12 12:41 PM
hi,

Try this code:

div
{
  backgroud-image: url('images/gradient.png');
  background-repeat: repeat-x;
  background-position: top right;
 
  background-repeat: no-repeat;
  background: #cbccc8;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8));
  background: -moz-linear-gradient(top,  #fff,  #cbccc8);
 
}
smr replied to Deepti Aggarwal on 30-Jan-12 06:57 AM
hi

The syntax for CSS3 Linear Gradients differs slightly between the Firefox and Safari/Chrome version.
They are:


-moz-linear-gradient(<point> || <angle>, color-stops) /*Firefox Linear gradients*/

and

-webkit-gradient(linear, <point>, color-stops) /*Safari, Chrome Linear gradients*/



Examples:

1) Left to Right Gradient
background: -moz-linear-gradient(left, #00abeb, #fff);
background: -webkit-gradient(linear, left center, right center, from(#00abeb), to(#fff));


2) Right to Left Gradient
background: -moz-linear-gradient(right, #00abeb, #fff);
background: -webkit-gradient(linear, right center, left center, from(#00abeb), to(#fff));


3) Top to Bottom Gradient
background: -moz-linear-gradient(top, #00abeb, #fff);
background: -webkit-gradient(linear, center top, center bottom, from(#00abeb), to(#fff));


4) Bottom to Top Gradient
background: -moz-linear-gradient(bottom, #00abeb, #fff);
background: -webkit-gradient(linear, center bottom, center top, from(#00abeb), to(#fff));



follow
http://www.dynamicdrive.com/style/csslibrary/item/css3_linear_gradients/