Need this effect

a block height of 500 pixels, this effect is only the bottom full width. So far it has only happened 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); }

I do not know how to make it fade up pixels of 75

    1 answer 1

    If the gradient is white at the top and not transparent, you can simply try to cover it with another gradient on top. If transparency is needed, I don’t know.

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