Как сделать лучше такой эффект(repeating-linear-gradient)?

блок высотой в 500 пикселей, данный эффект только снизу на всю ширину. Пока получилось только это https://jsfiddle.net/zdb15uun/1/

1. repeating gradient
2. Zebra pattern
3. Zebra pattern 3

div { display: block; width: 50%; height: 80px; border-color: #000000; padding: 10px; }
#grad { background-image: -moz-repeating-linear- gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%); background-image: -webkit-repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%); background-image: -o-repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%); background-image: repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%); }
#grad1 { background-image: repeating-linear-gradient(-45deg, rgba(209, 232, 220, 1), rgba(209, 232, 220, 1) 75px, rgba(212, 238, 222, 1) 10px, rgba(212, 238, 222, 1) 150px); }
#grad2 { background-color: #068445; background-image: repeating-linear-gradient(-45deg, rgba(6, 132, 69, 1), rgba(6, 132, 69, 1) 75px, rgba(27, 167, 80, 1) 10px, rgba(27, 167, 80, 1) 150px); }
не знаю, как его сделать выцветающим кверху пикселей эдак на 75

Ответ

Если градиент сверху белый, а не прозрачный, можно попробовать просто накрыть его сверху другим градиентом. Если нужна именно прозрачность, то не знаю.
html, body { height: 100%; margin: 0; } body { background-image: linear-gradient(to bottom, white, transparent), repeating-linear-gradient(-45deg, antiquewhite, antiquewhite 3em, silver 3em, silver 6em); }