I have the following code for a linear-gradient. Click here to view the code
Is there a way to modify it to use a repeating gradient instead?
The goal is to maintain the same image but with a repeating gradient effect.
background-image: repeating-linear-gradientNote that when using a repeating gradient, we do not utilize background-size as it disrupts the repetition pattern.
.test {
width: 100px;
height: 100px;
background-image: linear-gradient(
45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px
),
linear-gradient(
-45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px
);
background-size: 10px 10px;
}<div class="test"></div>