Geri Dön

Kayan Gradient Text

Havalı Animasyonlar / 4 Görüntülenme

Favoriye Ekle

Canlı Önizleme

Yazılım Kütüphanem

Nasıl Kullanılır?

Yazılarınızı vurgulamak için çok şıktır. 'background-size' ve animasyon hızı ile oynayarak degrade dalgasının hızını ayarlayın.

Kaynak Kodlar

HTML

<h1 class="gradient-text">Yazılım Kütüphanem</h1>

CSS

.gradient-text {
  font-size: 50px; font-weight: bold; font-family: 'Inter', sans-serif;
  background: linear-gradient(90deg, #6C5CE7, #00cec9, #ff4757, #6C5CE7);
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shine 3s linear infinite;
}
@keyframes shine { to { background-position: 200% center; } }