Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Horizontal CSS gradients?

Tags:

css

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%);
like image 423
Jef Null Avatar asked Sep 18 '10 22:09

Jef Null


1 Answers

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.)

like image 119
Matti Virkkunen Avatar answered Oct 02 '22 13:10

Matti Virkkunen