I did the following for the background:

Gradient1

Is it possible to change the direction of the red-black gradient of the stripes, so that, for example, the gradient has the direction to bottom (red is at the top and black is at the bottom of the stripes)?

Like that:

Gradient2

 .bg { width: 200px; height: 300px; background: repeating-linear-gradient(90deg, #d43434 0px, #000 20px, transparent 20px, transparent 40px), linear-gradient(to bottom, #04bcef 0%, #ed8200 53%, #ed8200 100%); } 
 <div class="bg"></div>

    3 answers 3

    Using JS here is an extreme case, since the performance and maintainability of your code will suffer from this.

    The problem with this gradient that needs to be rotated is that between the repetitions of the gradient itself, spaces are needed and there is no way for CSS to add them.

    Therefore, we will make a picture using SVG: a rectangle that occupies 50% of the width of the image with the gradient we need.

     svg { /* бесконечная серая тень чтобы выделить саму картинку */ box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.1); } 
     <svg> <linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1" > <stop offset="0" style="stop-color:#d43434"/> <stop offset="1" style="stop-color:#000"/> </linearGradient> <rect width="50%" height="100%" fill="url(#gradient)" /> </svg>

    Next, either save this image and use the link to it (preferably), or encrypt it (for example, using this service ) for use in CSS:

     .bg { width: 200px; height: 300px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3ClinearGradient id='gradient' gradientUnits='objectBoundingBox' x1='0' y1='0' x2='0' y2='1' %3E%3Cstop offset='0' style='stop-color:%23d43434'/%3E%3Cstop offset='1' style='stop-color:%23000'/%3E%3C/linearGradient%3E%3Crect width='50%25' height='100%25' fill='url%28%23gradient%29' /%3E%3C/svg%3E") 0 0 / 40px 100% round, linear-gradient(to bottom, #04bcef 0%, #ed8200 53%, #ed8200 100%); } 
     <div class="bg"></div>

    In the example above, this SVG is set to background-size: 40px 100% and background-repeat: repeat-x .

      If we cannot derive the standard gradient for some reason, then we will do it in cycles, so as not to fence these span . I brought them in a loop on JS, well, and stylized in CSS. See:

       var Temp = document.getElementById("elem").innerHTML; for (var n = 1; n <= 29; n++) { Temp += "<span></span>"; document.getElementById("elem").innerHTML = Temp; } 
       .item { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; } .item span { display: block; width: 10%; height: 100vh; } span:nth-child(odd) { background: linear-gradient(rgba(162, 40, 40, .8), #000); } span:nth-child(even) { background: linear-gradient(lightblue 0%, green 30%, orange 70%); } 
       <div id="elem" class="item"></div>

        180deg - 180deg could correct themselves

         body { width: 200px; height: 300px; background: repeating-linear-gradient(180deg, #d43434 0px, #000 20px, transparent 20px, transparent 40px), linear-gradient(to bottom, #04bcef 0%, #ed8200 53%, #ed8200 100%); }

        • I need to change not the direction of the stripes, but the direction of the gradient on the stripes. The strips must remain vertical. Added a result image to the description. - www
        • then it is necessary to re-do it ... in this case it does not work out this way, but one more gradient can be applied ... below - in the morning if no one gives an answer - I will do it - user33274