Membuat Animated Gradient Box

Seperti biasa, saya bingung membuat pembukaan setiap nulis artikel,
jadi langsung aja,
buat kalian yang bingung apa itu Gradient Box? dan seperti apa itu gradient box ?
kalian bisa melihatnya seperti gambar diatas, atau kalian bisa lihat demonya, dibawah ini.

• DEMO

Animated Gradient Box tersebut hanya menggunakan CSS,
jadi kalian bisa mengedit tampilan atau mengubah warnanya, dan kalian juga bisa jadikan itu sebagai background button,

Untuk menampilkan di blog atau web kalian, kalian hanya perlu menyalin script dibawah ini.

@import url('https://fonts.googleapis.com/css?family=Raleway:200');

#box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 200px;
  color: white;
  font-family: 'Raleway';
  font-size: 2.5rem;
}
.gradient-border {
  --borderWidth: 5px;
  position: relative;
  border-radius: var(--borderWidth);
}
.gradient-border:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  border-radius: calc(2 * var(--borderWidth));
  z-index: -1;
  animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
}


@keyframes animatedgradient {
 0% {
  background-position: 0% 50%;
 }
 50% {
  background-position: 100% 50%;
 }
 100% {
  background-position: 0% 50%;
 }
}

yand diatas itu adalah CSSnya,
jika kalian ingin edit tampilannya, edit pada CSSnya

dibawah ini HTMLnya, untuk menampilkannya

<div class="gradient-border" id="box">VAMOUS.ID <br>CSS<br>Gradient Box</div>

Ganti Tulisan Kuning, dengan tulisan yang kalian inginkan
Gradient box tersebut bisa kalian gunakan untuk template blog kalian, atau kalian bisa berimajinasikan untuk sesuatu yang menarik.
sekian artikelnya

Jika masih ada yang dibingungkan, saya menyediakan kolom komentar.