Göz alıcı başlıklar için background-clip kullanarak metne gradyan renkler uygulama.
.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%; }
}.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.
Fikrinizi nasıl hayata geçirebileceğimizi konuşalım. İlk konseptten üretime hazır ürüne kadar — yanınızdayız.