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 birlikte hayata geçirelim. 50+ teslim edilmiş projeyle sizi konseptten yayına hazır bir ürüne taşıyor; sabit fiyatlı tekliflerle özel yazılım geliştirme sunuyoruz. Hiçbir taahhüt olmadan ücretsiz danışmanlık alın.

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