linear-gradient size:

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 one slice only (so we are giving it a size) using color-stop position values(remember we can achieve the same using background-size property)

repeating a linear gradient:

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.

examples explain better:

repeating the gradient using repeating-linear-gradtien() function
the gradient is faked to have only one slice using transparent color-stop
repeating-linear-gradient() faked using background-size and background-repeat properties.

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 transparent 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 repeating-linear-gradient(); if i want the gradient to be repeated over the background).

sizing the ending shape(circle&elipse) using radial-gradien() function

the size of the radial gradient when descided in the gradient function radial-gradient();will only calculate the size of the ending shape which in turn calculating the gradient ray length.

sizing the entire radial gradient (as background-image)using background-size property

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..

radial gradient repeated using repeating-radial-gradient.repeating using background-repeat is a different idea.this is the only way to get this result