CSS gradients start to fade when generating more lines every x% - html

Question

I'm trying to create a gradient that simply shows a red line every x%.
When I start generating more lines the red stripes seems to start fading into white.
the .four-stripes selector gives a nice result, but when I add one more red line, like in more-stripes everything starts to get blurry...
See codepen for an example:
div {
width: 1200px;
height: 20px;
}
.four-stripes {
background: linear-gradient(90deg,red 0.00% 0.27%,transparent 0.27% 1.92%,red 1.92% 2.19%,transparent 2.19% 3.84%,red 3.84% 4.11%,transparent 4.11% 5.75%,red 5.75% 6.03%,transparent 6.03% 100%);
}
.more-stripes {
background: linear-gradient(90deg,red 0.00% 0.27%,transparent 0.27% 1.92%,red 1.92% 2.19%,transparent 2.19% 3.84%,red 3.84% 4.11%,transparent 4.11% 5.75%,red 5.75% 6.03%,transparent 6.03% 7.67%,red 7.67% 7.95%,transparent 7.95% 100%)
}
<div>
<div class="four-stripes"></div>
<div class="more-stripes"></div>
</div>

Answer 1

Using "repeating-linear-gradient" may help.
div {
width: 1200px;
height: 20px;
}
.more-stripes {
background: repeating-linear-gradient(
90deg,
red,
red 5px,
transparent 5px,
transparent 20px
);
}
<div>
<div class="more-stripes"></div>
</div>

Answer 2

make the gradient easy and adjust the background-size.
div {
height: 20px;
margin:5px;
}
.four-stripes {
background:
linear-gradient(to right,red 5px,transparent 0 100%)
left/25% 100%;
}
.more-stripes {
background:
linear-gradient(to right,red 5px,transparent 0 100%)
left/15% 100%;
}
<div>
<div class="four-stripes"></div>
<div class="more-stripes"></div>
</div>
Or like this if you want to keep a fixed distance between stripes:
div {
height: 20px;
margin:5px;
}
.four-stripes {
background:
repeating-linear-gradient(to right,red 0 5px,transparent 0 40px)
left/calc(4*40px) 100% no-repeat;
}
.more-stripes {
background:
repeating-linear-gradient(to right,red 0 5px,transparent 0 40px)
left/calc(6*40px) 100% no-repeat;
}
<div>
<div class="four-stripes"></div>
<div class="more-stripes"></div>
</div>