title: Background gradient top left and bottom right
body: <p>I have this css applied to my DIV</p>
  
  <pre><code>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%);
  }
  </code></pre>
  
  <p>Question - I want to apply the gradient to top left and another gradient to bottom right, what is the correct syntax to achieve this?</p>