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%);
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.)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With