CODEWITHSUNDEEP
css
Jef Null
Jef Null

Reputation: 415

Horizontal CSS gradients?

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%);

Upvotes: 12

Views: 11581

Answers (1)

Matti Virkkunen
Matti Virkkunen

Reputation: 65126

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

Upvotes: 9

Related Questions