Линейный, правый затухающий до прозрачного градиента с дополнительным выцветанием внизу

Question

В первый раз я не смог создать красивый градиент с CSS3. На правой стороне должен быть постепенный переход к прозрачному градиенту от черного до прозрачного. В нижней части находится нижний колонтитул, поэтому он должен дополнительно исчезать снизу до прозрачного.

Пример, как это может выглядеть, если это возможно:

фон страницы изображение, поэтому нет непрозрачных выцветает не возможно и обратите внимание, что страница может быть изменена, поэтому значения позиции и значения размера должны быть относительными и абсолютными значениями пикселей.

Просьба предоставить только решения с градиентами CSS, без (фоновых) изображений.

Я уже пробовал некоторые возможности, но ни один не выглядит действительно хорошо:

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; 
} 

http://jsfiddle.net/RgYe2/

Answer 1

Существует очень хороший сайт, который генерирует градиент фона, я использую его на большинство моих проектов. Link here.

Answer 2

Одна из идей будет выглядеть следующим образом: 2 линейных градиентов, а затем радиальный градиент, чтобы сделать углу

#test { 
    width: 800px; 
    height: 400px; 
    background-image: linear-gradient(90deg,black 60%, transparent 100%), linear-gradient(180deg, black, transparent), radial-gradient(ellipse at top left, black 1%, transparent 70%); 
    background-size: 100% 80%, 60% 20%, 40% 20%; 
    background-position: top left, bottom left, bottom right; 
    background-repeat: no-repeat; 
} 

body, html { 
    height: 99%; 
     background-color: lightblue; 
} 

demo