Cara Membuat Animasi Gradient Border Menggunakan CSS

Pedia Lover - Gradient border mempunyai keunikan tersendiri, fungsi dan kegunaannya cukup banyak. Border ini juga bagus untuk mempercantik tombol-tombol tertentu maupun yang lainnya.

Nah, maka dari itu di sini saya akan berbagi tutorial "cara membuat animasi gradient border" yang ditambah dengan balutan animasi hanya menggunakan CSS. Anda bisa mengikuti caranya serta meniru kode-kode yang saya berikan.

Bagaimana cara membuat gradient border? Caranya cukup mudah. Silahkan perhatikan langkah-langkah di bawah.

Membuat Animasi Gradient Border

Langkah Pertama

Kita buat CSS nya terlebih dulu. Perhatikan contoh kode CSS berikut ini:

.card{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  
  max-width: 40ch;
  padding: 2.5rem;
  
  background: #12181b;
  
  border-radius: 5px;
}

.card::after {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -1;
  
  border-radius: 5px;
  
  background: linear-gradient(90deg, #845ec2, #d65db1, #ff6f91, #ff9671, #ffc75f, #f9f871);
  background-size: 300% 300%;
  background-position-x: 0%;
  
  animation: border-animation 5s alternate infinite;
}



@keyframes border-animation {
  0%{
    background-position-x: 0%;
  }
  100%{
    background-position-x: 100%;
  }
}

Langkah Kedua

Coba buat HTML nya. Bisa Anda lihat penampakan di bawah contoh kodenya:

<div class="card">
  <h2>Gradient Border</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque imperdiet urna sit amet nisl dignissim scelerisque.</p>
</div>

Langkah Ketiga

Jika semuanya sudah Anda buat dengan mengikuti langkah di atas dan menempatkannya dengan benar, silahkan coba Anda lihat bagaimana hasilnya.

Note:

Untuk CSS nya, Anda bisa kreasikan sesuai keinginan!

Bagaimana, sangat mudah bukan?!

Oke saya rasa cukup sekian untuk tutorial cara membuat animasi gradient border kali ini. Artikel ini saya buat dengan sebenar-benarnya dan semata-mata hanya ingin berbagi kepada Anda semua.

Dengan adanya artikel ini, semoga bisa bermanfaat dan membantu. Akhir kata saya ucapkan terimakasih!

Artikel ini pertama kali tayang di pedia lover pada Rabu, 31/01/2024.