блок высотой в 500 пикселей, данный эффект только снизу на всю ширину. Пока получилось только это https://jsfiddle.net/zdb15uun/1/
<ol>
<li>repeating gradient
<div id="grad1"></div>
</li>
<li>Zebra pattern
<div id="grad2"></div>
</li>
<li>Zebra pattern 3
<div id="grad3"></div>
</li>
</ol>
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