Parçacıklara Dön
CSS / TailwindCSS

CSS Gradyan Metin

Göz alıcı başlıklar için background-clip kullanarak metne gradyan renkler uygulama.

cssgradienttextcolor
.gradient-text {
  background: linear-gradient(135deg, text-emerald-400">"text-gray">#667eea 0%, #764ba2 50%, #f093fb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

text-emerald-400">"text-gray">/* Animated gradient */
.gradient-text-animated {
  background: linear-gradient(270deg, text-emerald-400">"text-gray">#12c2e9, #c471ed, #f64f59, #12c2e9);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 4s ease infinite;
}

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

Nasıl Kullanılır

.gradient-text sınıfını herhangi bir başlık elemanına ekleyin. background-clip'in düzgün çalışması için inline-block display gereklidir. Dikkat çekici hero bölümleri için animasyonlu varyantı kullanın.

İlgili Teknoloji

Tailwind CSS

Aklınızda Bir Proje mi Var?

Fikrinizi nasıl hayata geçirebileceğimizi konuşalım. İlk konseptten üretime hazır ürüne kadar — yanınızdayız.

veya ücretsiz görüşme ayarlayın