Cara Membuat Animated Glowing Cards dengan CSS Modern

Efek visual yang dinamis sering kali menjadi pembeda antara desain website yang standar dan yang luar biasa. Dalam video terbaru ini, kita melihat tiga kartu dengan tema berbeda: Emerald Surge, Ocean Pulse, dan Neon Dream. Semuanya memiliki satu kesamaan: border animasi yang menyala (glowing).

Konsep Utama: "The Moving Gradient"

Rahasia dari garis tepi yang bergerak ini bukan menggunakan properti border biasa, melainkan menggunakan lapisan Pseudo-elements (::before atau ::after) yang diputar di belakang kartu utama.

• Kartu Utama: Menjadi wadah konten.

• Lapisan Belakang: Sebuah kotak yang sedikit lebih besar dengan gradien warna-warni yang berputar secara kontinu.

• Masking: Menutup bagian tengah sehingga hanya bagian tepi yang terlihat (seperti border).

Berikut kode CSS

.card {
position: relative;
width: 300px;
height: 400px;
background: #000;
border-radius: 20px;
overflow: hidden; /* Memotong bagian gradien yang keluar */
display: flex;
justify-content: center;
align-items: center;
}

/* Lapisan gradien yang berputar */
.card::before {
content: '';
position: absolute;
width: 150%;
height: 150%;
background: conic-gradient(#00ff87, #60efff, #00ff87); /* Warna Emerald */
animation: rotate 4s linear infinite;
}

/* Menutupi bagian tengah agar hanya border yang tersisa */
.card-inner {
position: absolute;
inset: 4px; /* Ketebalan border */
background: #111;
border-radius: 18px;
z-index: 1;
padding: 20px;
color: white;
}

/* Animasi Rotasi */
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

}

LINK SOURCE CODE

Silahkan download source codenya gratis dan untuk hasil tampilanya silahkan lihat pada video TikTok dibawah ini.

GET CODE    WATCH HERE.!

Kesimpulan

Efek ini sangat cocok untuk halaman pricing, portfolio, atau landing page produk teknologi tinggi. Dengan hanya sedikit baris CSS, website kamu akan terlihat jauh lebih profesional dan interaktif.

Tertarik mencoba? Salin atau download kode di atas, lalu buka di editor teks Anda dan mulailah berkreasi, Selamat mencoba!

 Untuk Mendapatkan Info Terbaru, Silahkan Bergabung Di Saluran Kami Dibawah ini: