tags:

views:

61

answers:

1

I Want to have a gradient as the background of my webpage. I have figured out how to make the gradient vertical but I want it to be horizontal.

background-image: -webkit-gradient(linear, 0% 25%, 0% 0%, from(rgb(176, 196, 222)), to(rgb(255, 255, 255)));
background-image: -moz-linear-gradient(center bottom, rgb(153, 255, 51) 25%, rgb(255, 102, 51) 80%);
+1  A: 

For -webkit-gradient you define the direction by using the two points (the 2nd and 3rd argument in your case), and for -moz-linear-gradient it's defined by the starting point only (the first argument). So to turn those gradients to horizontal ones, you'd do:

background-image: -webkit-gradient(linear, 25% 0%, 0% 0%, from(rgb(176, 196, 222)), to(rgb(255, 255, 255)));
background-image: -moz-linear-gradient(center right, rgb(153, 255, 51) 25%, rgb(255, 102, 51) 80%);

(You might have to tweak your color values because you're defining the points differently for each browser. It could be easier if you set the points to center right, center left for Webkit as well to match Mozilla.)

Matti Virkkunen