title: Linear gradient CSS
body: <p>In a help of you all. I am not new to CSS but new to this problem. I really wanted to use CSS gradient property. But the way I need is that I need to set the gradient from bottom to top and right to left. Simply like scroll bars, in page right and bottom. I have created bottom to top one class and right to left one class. Simpe CSS concept it overwrites with the latest style.</p>
  
  <p>How can I tackle this situation. The way I tried is as below:</p>
  
  <pre><code>.bottom_to_top{background: -webkit-linear-gradient(center top, #FFFFFF 95%, #80868E 100%);}
  .right_to_left{-webkit-linear-gradient(center left,#FFFFFF 95%, #80868E 100%);}
  </code></pre>
  
  <p>I have called these two classes but simply one is overwritten by another. How can I tackle this situation. No Browser compatibility (Only for Chrome). No need the image usage also. </p>