CSS Only Day 2: Gradient Text — Efek Teks Gradien Animasi Tanpa JavaScript

Seri CSS Only Day 2: animasi Gradient Text di mana gradien warna bergerak melintasi teks secara halus memberikan kesan berkilau (shimmering) tanpa memerlukan JavaScript pihak ketiga.

Teknik ini memanfaatkan background-clip: text standar dipadukan dengan ukuran latar belakang yang diperbesar (background-size: 200% auto) dan translasi posisi latar secara berulang.

Trik Implementasi Gradien Bergerak

Kunci efek teks gradien terletak pada klip latar belakang ke teks dan animasi posisi gradien secara halus:

.gradient-text {
  background: linear-gradient(
    90deg,
    #ff007f 0%,
    #7928ca 50%,
    #00dfd8 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s linear infinite;
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}

Timestamp video

• 00:00 — Mulai demo efek animasi Gradient Text

Format dan sumber

Short berdurasi 19 detik ini tidak memiliki chapter bawaan di YouTube; penanda 00:00 merujuk langsung ke awal demonstrasi. Demonstrasi kode dan repositori sumber ditautkan di deskripsi kreator: Demo interaktif csskit dan GitHub csskit-ab2rahman. Sumber video, diunggah 2026-08-09.