How can I implement both horizontal and vertical gradients on an html element

can someone point me how to implement gradient to only the top, bottom and right sides of an html div element using any of the mozilla gradient properties in css ? if i do a vertical gradient using -moz-linear-gradient property, i'm mis开发者_JAVA百科sing out on the gradient to be applied on the right side of the div element.

---

I am not 100% sure this is what you want but you can nest a div element in the target div element, set a horizontal gradient in one and set a vertical gradient in the other. Then, change the opacity of the nested div element to 50%.

EDIT: This is a little rough around the edges but this works in Firefox. Note that you cannot change the opacity of child elements to a value higher than the the parent opacity. Child opacities are relative, not absolute.

---

This is possible thanks to CSS3. Just put both vertical and horizontal gradient together on the same line, separated by a comma.

For example, to create this nice background

I'm using this code :

background: linear-gradient(to bottom, #80d0b9 0%,#80d0b9 30px,#e7f3f3 30px,#e7f3f3 100%) no-repeat top left,
            linear-gradient(to right,  #c2ebec 0%,#c2ebec 30px,#e7f3f3 30px,#e7f3f3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background-size: 30px 100%;

Here is a demo