gradient size and how to repeat a gradient like a pro

<section class="linear"> <p><h1>linear-gradient size:</h1>we can imagine a linear gradient as a simple backgound image and the gradient is covering the entire gradient box(element background) then we can size the gradient(background image) using background-size property and repeat it using background-repeat set it's positions using background-positions and so on just like simple image background.also we can size a linear gradient to be as big as <b><i>one slice only</i></b> (so we are giving it a size) using color-stop position values(remember we can achieve the same using background-size property)</p> <p><h1>repeating a linear gradient:</h1>again imagine the linear gradient as aa background image and we can repeat it using background-repeat.so if we draw a linear gradient to be as big as one slice only and repeat it using backgoround-repeat so we are achieving the same goal repeating-linear-gradient(); function was created for.or we can use repeating-linear-gradient() function which is basicly better. <p>examples explain better:</p></p> <section class="linear-usecases"> <div class="gdt"> <div class="info-box-1">repeating the gradient using repeating-linear-gradtien() function</div> </div> <div class="gdt-slices"> <div class="info-box-2">the gradient is faked to have only one slice using transparent color-stop</div> </div> <div class="gdt-slices-size"> <div class="info-box-3">repeating-linear-gradient() faked using background-size and background-repeat properties.</div> </div> </section> <p>the size of a linear gradient can be descided in two ways: one if we decide the gradient that i want then use background-size peoperty and then use background-repeat: if i want to repeat it just like when i use repeating-linear-gradient() function or simply i size it to any size desired.two if i descide it using color-stops.that is color-stop positions will descide how big the gradient size will be then i should either end the gradient with <i style="color:red;">transparent</i> color-stop so that i can stop the spreading over the gradient line that keeps going until the end of the gradient line and have only one slice of gradient or use <i style="color:red;">repeating-linear-gradient();</i> if i want the gradient to be repeated over the background).</p> </section> <section class="radial"> <div class="rgdt"> <div class="info-box-4"> sizing the ending shape(circle&elipse) using radial-gradien() function </div> </div> <p>the size of the radial gradient when descided in the gradient function <i style="color:red;">radial-gradient();</i>will only calculate the size of the ending shape which in turn calculating the gradient ray length.</p> <div class="rgdt-2"> <div class="info-box-5">sizing the entire radial gradient (as background-image)using background-size property </div> </div> <p>now the radial gradient can be sized just like any normal background-image using background-size,this is quite different than calculating the size of the ending shape inside the radial-function,here, we are only calculating the size of the background that the gradient as a (background image) will take from the element's total background size..</p> <div class="rgdt-3"> <div class="info-box-4">radial gradient repeated using repeating-radial-gradient.repeating using background-repeat is a different idea.this is the only way to get this result</div> </div> </section>