title: Linear, right fading to transparent gradient with additional fade at bottom
body: <p>The first time I couldn't create a good looking gradient with CSS3. There should be on the right side a fading to transparent gradient from black to transparent. At the bottom is the footer, so it needs to fade additionally at the bottom to transparent too.</p>
  
  <p>An example how it may look like if possible:</p>
  
  <p><img src="https://i.stack.imgur.com/YoWyF.jpg" alt="enter image description here"></p>
  
  <p>The background of the page is an image, so no non-transparent fades are possible and please note that the page could be resized, so the position values and size values needs to be relative and no absolute pixel values. </p>
  
  <p>Please provide just solutions with CSS gradients, no (background) images.</p>
  
  <p>I tried already some possibilities, but no one looks really good:</p>
  
  <pre><code>div {
      position: relative;
      width: 500px;
      height: 300px;
      border: 1px solid #ccc;
      background: url(http://www.okilla.com/uploadfile/1/2013/06/15/11371284566/1371286115_dark-noise-background-8.png);
      background-size: cover;
  }
  
  div:before {
      content: "";
      position: absolute;
      right: 0;
      height: 100%;
      width: 80px;
      background: -moz-linear-gradient(55deg, rgba(0, 0, 0, 0) 0%, 
                                              rgba(0, 0, 0, 0.5) 60%, 
                                              rgba(0, 0, 0, 1) 100%), 
                  -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, 
                                             rgba(0, 0, 0, 1) 40%, 
                                             rgba(0, 0, 0, 1) 100%);
      background: -webkit-linear-gradient(55deg, rgba(0, 0, 0, 0) 0%, 
                                                 rgba(0, 0, 0, 0.5) 60%, 
                                                 rgba(0, 0, 0, 1) 100%), 
                  -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, 
                                                rgba(0, 0, 0, 1) 40%, 
                                                rgba(0, 0, 0, 1) 100%);
      background-size: 100% 10%, 100% 90%;
      background-repeat: no-repeat;
      background-position: bottom left, 0 1px;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/RgYe2/" rel="nofollow noreferrer">http://jsfiddle.net/RgYe2/</a></p>