How to convert linear-gradient to use repeating-linear-gradient instead

I have this linear-gradient code here. https://jsfiddle.net/0qfy3ks2/

How would I have it use a repeating gradient instead?

So the image is the same, just using a repeating gradient instead.

background-image: repeating-linear-gradient

The repeating gradient doesn’t use background-size as that breaks the repeating 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>

Hi @javascriptcoding5678,
after googling I found this function: repeating-linear-gradient().

It only works if you apply these rules to the body, I don’t know why.
I hope I was helpful. :wave:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.