<div class='gradient box'></div>
<div class='gradient-hard box'></div>

<div class='gradient-hard-repeat box'></div>

body {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 100vh;
}
.box {
  width: 200px;
  aspect-ratio: 1;
}
.gradient {
  background-image: linear-gradient(red 0%, blue 100%);
}
.gradient-hard {
  background-image: linear-gradient(red 0%, red 50%, blue 50%, blue 100%);
}
.gradient-hard-repeat {
  background-image: repeating-linear-gradient(red 0%, red 5%, blue 5%, blue 10%);
}