<div class="linear-gradient animation__rotate"></div>
<div class="radial-gradient animation__radial"></div>
<div class="coinc-gradient animation__rotate"></div>
<div class="repeating-linear-gradient animation__rotate"></div>
<div class="repeating-radial-gradient animation__radial"></div>
<div class="repeating-coinc-gradient animation__rotate"></div>

<div class="linear-gradient animation__rotate border"></div>
<div class="radial-gradient animation__radial border"></div>
<div class="coinc-gradient animation__rotate border"></div>
<div class="repeating-linear-gradient animation__rotate border"></div>
<div class="repeating-radial-gradient animation__radial border"></div>
<div class="repeating-coinc-gradient animation__rotate border"></div>

<div class="linear-gradient animation__rotate border radius"></div>
<div class="radial-gradient animation__radial border radius"></div>
<div class="coinc-gradient animation__rotate border radius"></div>
<div class="repeating-linear-gradient animation__rotate border radius"></div>
<div class="repeating-radial-gradient animation__radial border radius"></div>
<div class="repeating-coinc-gradient animation__rotate border radius"></div>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #222;
  color: #fff;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px 10px;
  padding: 10px 10px 36px;
  font-size: 1.5rem;
  place-content: center;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 90deg;
  inherits: true;
}

@property --gradX {
  syntax: "<percentage>";
  initial-value: 50%;
  inherits: true;
}

@property --gradY {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: true;
}

:root {
  --d: 30000ms;
  --angle: 90deg;
  --gradX: 100%;
  --gradY: 50%;
  --c1: red;
  --c2: gold;
  --c3: yellow;
  --c4: lime;
  --c5: aqua;
  --c6: blue;
  --c7: magenta;
}

@keyframes borderRotate {
  100% {
    --angle: 720deg;
  }
}

@keyframes borderRadial {
  20% {
    --gradX: 100%;
    --gradY: 50%;
  }
  40% {
    --gradX: 100%;
    --gradY: 100%;
  }
  60% {
    --gradX: 50%;
    --gradY: 100%;
  }
  80% {
    --gradX: 0%;
    --gradY: 50%;
  }
  100% {
    --gradX: 50%;
    --gradY: 0%;
  }
}

div {
  min-height: 40vh;
  background-image: conic-gradient(
    from var(--angle),
    var(--c2),
    var(--c1) 0.1turn,
    var(--c1) 0.15turn,
    var(--c2) 0.25turn
  );
}

.animation__rotate {
  animation: borderRotate var(--d) linear infinite forwards;
}

.animation__radial {
  animation: borderRadial var(--d) linear infinite forwards;
}

.linear-gradient {
  background-image: linear-gradient(
    var(--angle),
    var(--c1),
    var(--c2),
    var(--c3),
    var(--c4),
    var(--c5),
    var(--c6),
    var(--c7)
  );
}

.radial-gradient {
  background-image: radial-gradient(
    at var(--gradX) var(--gradY),
    var(--c1),
    var(--c2),
    var(--c3),
    var(--c4),
    var(--c5),
    var(--c6),
    var(--c7)
  );
}

.coinc-gradient {
  background-image: conic-gradient(
    from var(--angle),
    var(--c1),
    var(--c2),
    var(--c3),
    var(--c4),
    var(--c5),
    var(--c6),
    var(--c7)
  );
}

.repeating-linear-gradient {
  background-image: repeating-linear-gradient(
    var(--angle),
    var(--c1) 10px,
    var(--c2) 10px,
    var(--c3) 30px,
    var(--c4) 40px,
    var(--c5) 50px,
    var(--c6) 60px,
    var(--c7) 70px
  );
}

.repeating-radial-gradient {
  background-image: repeating-radial-gradient(
    at var(--gradX) var(--gradY),
    var(--c1) 10px,
    var(--c2) 20px,
    var(--c3) 30px,
    var(--c4) 40px,
    var(--c5) 50px,
    var(--c6) 60px,
    var(--c7) 70px
  );
}

.repeating-coinc-gradient {
  background-image: repeating-conic-gradient(
    from var(--angle),
    var(--c1) 10deg,
    var(--c2) 0deg 20deg,
    var(--c3) 0deg 30deg,
    var(--c4) 0deg 40deg,
    var(--c5) 0deg 50deg,
    var(--c6) 0deg 60deg,
    var(--c7) 0 70deg
  );
}

.border {
  background: #222;
  border: 20px solid;
}

.linear-gradient.border {
  border-image: linear-gradient(
      var(--angle),
      var(--c1),
      var(--c2),
      var(--c3),
      var(--c4),
      var(--c5),
      var(--c6),
      var(--c7)
    )
    1;
}

.radial-gradient.border {
  border-image: radial-gradient(
      at var(--gradX) var(--gradY),
      var(--c1),
      var(--c2),
      var(--c3),
      var(--c4),
      var(--c5),
      var(--c6),
      var(--c7)
    )
    1;
}

.coinc-gradient.border {
  border-image: conic-gradient(
      from var(--angle),
      var(--c1),
      var(--c2),
      var(--c3),
      var(--c4),
      var(--c5),
      var(--c6),
      var(--c7)
    )
    1;
}

.repeating-linear-gradient.border {
  border-image: repeating-linear-gradient(
      var(--angle),
      var(--c1) 10px,
      var(--c2) 10px,
      var(--c3) 30px,
      var(--c4) 40px,
      var(--c5) 50px,
      var(--c6) 60px,
      var(--c7) 70px
    )
    1;
}

.repeating-radial-gradient.border {
  border-image: repeating-radial-gradient(
      at var(--gradX) var(--gradY),
      var(--c1) 10px,
      var(--c2) 20px,
      var(--c3) 30px,
      var(--c4) 40px,
      var(--c5) 50px,
      var(--c6) 60px,
      var(--c7) 70px
    )
    1;
}

.repeating-coinc-gradient.border {
  border-image: repeating-conic-gradient(
      from var(--angle),
      var(--c1) 10deg,
      var(--c2) 0deg 20deg,
      var(--c3) 0deg 30deg,
      var(--c4) 0deg 40deg,
      var(--c5) 0deg 50deg,
      var(--c6) 0deg 60deg,
      var(--c7) 0 70deg
    )
    1;
}

.radius {
  clip-path: inset(0 round 20px);
}