CSS gradient rendering text

For comparing browser rendering of both smooth and sharp gradient transitions, at different angles.

HTML

<div class="vertical"></div>
<div class="horizontal"></div>
<div class="diagonal" ></div>

CSS

div {width: 100%; height: 30vh; background-size: cover;}
.vertical{
  background: repeating-linear-gradient(to left, black 0, black 1em, white 4em, white 5em, red 5em, red 6em, white 9em, white 10em);
}
.horizontal{
  background: repeating-linear-gradient(to bottom, black 0, black 1em, white 4em, white 5em, red 5em, red 6em, white 9em, white 10em);
}
.diagonal{
  background: repeating-linear-gradient(to bottom left, black 0, black 1em, white 4em, white 5em, red 5em, red 6em, white 9em, white 10em);
}