Changing background color to a gradient color from top to bottom

• 

  snowallaboutit · Member · Sep 16, 2012 at 10:50 am

  • Copy link
  • Add topic to favorites

  Can anyone help with changing the background color of my page to a gradually changing color from top to bottom? in my case from black to white. Thanks

  The blog I need help with is: (visible only to logged in users)

• 

  designsimply · Member · Sep 27, 2012 at 3:13 pm

  • Copy link

  I used this to generate some CSS gradient code:
  http://www.colorzilla.com/gradient-editor/

  And then I applied it to the “body” tag. Here is an example:

  body {
  	background: #000000;
  	background: -moz-linear-gradient(top,  #000000 0%, #ffffff 100%);
  	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
  	background: -webkit-linear-gradient(top,  #000000 0%,#ffffff 100%);
  	background: -o-linear-gradient(top,  #000000 0%,#ffffff 100%);
  	background: -ms-linear-gradient(top,  #000000 0%,#ffffff 100%);
  	background: linear-gradient(to bottom,  #000000 0%,#ffffff 100%);
  	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );
  }

  You can use the generator to adjust the gradient and re-paste it into the center part of the example above if you’d like to modify it.