CSS Gradient Text (Yazı) Efekti Nasıl Yapılır?

Gradient text efekti, başlıklarda veya vurgu metinlerde çarpıcı bir görsel etki yaratır. CSS ile bu efekti elde etmek için background-clip: text ve -webkit-text-fill-color: transparent kullanılır. Bu rehberde teknik detayları, tarayıcı desteğini ve erişilebilirlik konularını ele alıyoruz.

Temel Yöntem: background-clip: text

Metin karakterlerinin içini gradient ile doldurmak için, önce gradient'i background-image olarak tanımlarız. Ardından background-clip: text ile gradient sadece metin pikseli alanına kırpılır. Metnin kendi rengi görünmesin diye color: transparent veya WebKit ön ekiyle -webkit-text-fill-color: transparent kullanılır.

.gradient-text {
  background: linear-gradient(90deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Önemli nokta: background-clip: text standart özelliktir ancak Safari ve eski Chrome sürümleri -webkit-background-clip: text gerektirir. Her iki ön eki de yazmak en iyi uyumluluk için önerilir. -webkit-text-fill-color: transparent ise metnin varsayılan rengini kaldırır; yalnızca color: transparent kullanılırsa bazı tarayıcılarda gradient görünmeyebilir.

Farklı Gradient Yönleri ve Renkler

Linear gradient açısını değiştirerek metindeki renk geçişinin yönünü ayarlayabilirsiniz. 90deg yatay, 180deg dikey geçiş verir. 135deg veya 45deg çapraz etkiler oluşturur.

.gradient-text-radial {
  background: radial-gradient(circle at center, #f093fb, #f5576c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gradient-text-conic {
  background: conic-gradient(from 0deg, #667eea, #764ba2, #f093fb, #667eea);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

Çok Renkli Gradient Metin

Üç veya daha fazla renk durağı ekleyerek daha zengin geçişler elde edebilirsiniz. Yüzde değerleri ile her rengin konumunu kontrol edersiniz.

.rainbow-text {
  background: linear-gradient(
    90deg,
    #ff6b6b 0%,
    #feca57 25%,
    #48dbfb 50%,
    #ff9ff3 75%,
    #54a0ff 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

Tarayıcı Desteği

background-clip: text tüm modern tarayıcılarda desteklenir: Chrome 2+, Firefox 49+, Safari 14+, Edge 79+. Eski tarayıcılarda gradient metin görünmezse fallback olarak düz color kullanılabilir. @supports ile kontrol yapılabilir.

.gradient-text-safe {
  color: #667eea; /* fallback */
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-text-safe {
    background: linear-gradient(90deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

Erişilebilirlik Notları

Gradient metin estetik olarak çekici olsa da erişilebilirlik açısından dikkat edilmesi gereken noktalar vardır. Kontrast: Metnin arka planıyla kontrastı WCAG AA/AAA standartlarını karşılamalıdır. Gradient geçişinde bazı tonlar arka plana yakın olabilir; bu durumda okunabilirlik azalır. Mümkünse koyu arka plan üzerinde açık gradient veya açık arka plan üzerinde koyu gradient tercih edin.

Renk körlüğü: Sadece renge dayalı bilgi iletiminden kaçının. Önemli bilgiler için gradient yanında ikincil görsel ipuçları (alt çizgi, ikon vb.) kullanın. Dark mode veya yüksek kontrast modunda gradient renkleri değişebilir; test edin.

prefers-reduced-motion veya benzeri tercihler gradient animasyonunu etkileyebilir. Hareket hassasiyeti olan kullanıcılar için animasyonlu gradient metin yerine statik gradient tercih edilebilir.

Hover ve Animasyon

Gradient metne hover efekti eklemek için background-position animasyonu veya farklı gradient geçişi kullanılabilir. transition ile yumuşak geçiş sağlanır.

.gradient-text-hover {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #667eea 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 0.5s ease;
}
.gradient-text-hover:hover {
  background-position: 100% center;
}

Özet

CSS gradient text efekti background-clip: text ve -webkit-text-fill-color: transparent ile kolayca uygulanır. Tarayıcı desteği iyidir; fallback ile eski tarayıcılara uyum sağlanabilir. Erişilebilirlik için kontrast ve renk körlüğüne dikkat edin. Gradient Oluşturucu ile renklerinizi deneyebilir, WCAG ve kontrast rehberimizle erişilebilir tasarımı güçlendirebilirsiniz.