Background gradient top left and bottom right

Question

I have this css applied to my DIV

div#envelope{
width: 400px;
margin: 140px 23% 10px 16%;
padding:33px 0 10px 0;
border-radius:2px;
background-color: rgba(255,255,255,0.5);
background-image: -webkit-gradient(
linear,
right bottom,
left top,
color-stop(0, rgba(255, 255, 255, 0.5)),
color-stop(0.50, rgba(255, 255, 255, 0.5))
);
background-image: -o-linear-gradient(left top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255,     0.5) 50%);
background-image: -moz-linear-gradient(left top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 50%);
background-image: -webkit-linear-gradient(left top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 50%);
background-image: -ms-linear-gradient(left top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 50%);
background-image: linear-gradient(to left top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 50%);
}

Question - I want to apply the gradient to top left and another gradient to bottom right, what is the correct syntax to achieve this?

Answer 1

You want to apply a gradient towards the top-left and another towards the bottom right. You can however do this with a single gradient using 3 colors. The 0% value will be in the right bottom, the 100% value in the left top, the 50% value will be between them. Feel free to play around with the JSFiddle . Hope this answers your question.

background:
        linear-gradient(to left top, rgba(0, 255, 255, 1) 0%/*bottom-right color*/, rgba(255, 0, 255, 0.5) 50% /*middle color*/, rgba(255, 255, 0, 1) 100% /*top-left color*/),
        linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1))/*"faked" black background make sure to add last or it will appear before the transparent/colored layer*/;

PS: I did only use the "regular" gradient and not all cross-browser ones (you seem to be perfectly capable of that yourself).

PSII: You can always add more colors to the gradient.