CODEWITHSUNDEEP
cssgradientlinear-gradientsrepeating-linear-gradient
user17382064
user17382064

Reputation:

How to use repeating gradient in place of linear-gradient

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>

Upvotes: 0

Views: 64

Answers (1)

Ali Klein
Ali Klein

Reputation: 1908

You could do something like this? You can change the size by changing the px values:

.test {
  width: 100px;
  height: 100px;
  background-size: 8px 8px;
  background:
    repeating-linear-gradient(45deg,
      transparent,
      transparent 4.5px,
      rgba(0, 0, 0, .75) 5px,
      transparent 5.5px,
      transparent 7px),
    repeating-linear-gradient(-45deg,
      transparent,
      transparent 4.5px,
       rgba(0, 0, 0, .75) 5px,
      transparent 5.5px,
      transparent 7px);
}
<div class="test"></div>

Upvotes: 0

Related Questions