CSS Gradient Nasıl Yapılır? linear-gradient Örnekleri

Kısa cevap: CSS gradient, iki veya daha fazla renk arasında yumuşak geçiş oluşturmak için kullanılan bir görüntü değeridir. Çoğu durumda ek görsel dosyası gerektirmeden uygulanabilir. Ancak bir arka planın güzel görünmesi, üzerindeki yazının her noktada okunabilir olduğu anlamına gelmez.

1. CSS gradient nedir?

Gradyan, rengin bir anda değil belirli doğrultuda veya merkez etrafında dönüşmesidir. Linear-gradient doğrusal, radial-gradient merkezden yayılan bir geçiş sunar. Başlangıçta iki renkli sade bir örnek kurup tasarımı gerçek sayfada test etmek daha kolaydır.

• Hangi bölümde kullanılacağını seçin.
• Gereksiz çok renkli geçişlerden kaçının.
• Metnin okunabilirliğini ayrıca değerlendirin.

2. linear-gradient nasıl yazılır?

Temel sözdiziminde açıyı, ardından virgülle ayrılmış renkleri yazarsınız. background veya background-image özelliği içinde kullanılabilir. Örneğin linear-gradient(135deg, #6258ff, #00c9ac) iki renkli eğimli bir geçiş üretir.

• Önce iki HEX rengi seçin.
• 45, 90 ve 135 derece değerlerini deneyin.
• Kuralı gerçek kapsayıcıda test edin.

3. Derece ve yön seçimi

Derece değeri geçiş doğrultusunu değiştirir. Yönü to right veya to bottom gibi ifadelerle de tanımlayabilirsiniz. Tasarım uygulamalarında açıların gösterimi farklı olabileceğinden, kodu doğrudan tarayıcıda inceleyin.

• Farklı açıları karşılaştırın.
• Köşelerdeki renkleri gözlemleyin.
• Arka planın mobil görünümünü test edin.

4. Renk duraklarıyla daha kontrollü geçiş

İki rengin yanında üçüncü renk ve yüzde konumu ekleyerek belirli noktalarda geçiş hızını etkileyebilirsiniz. Örneğin 0, 50 ve 100 yüzde konumlarıyla çok katmanlı görünümler elde edilebilir. Çok sayıda durak oluşturmak her zaman daha iyi bir tasarım anlamına gelmez.

• İki ve üç renkli örnekleri ayrı test edin.
• Renklerin yakın tonlarda olup olmadığını inceleyin.
• Farklı temalarda geçişi kontrol edin.

5. Ücretsiz gradient oluşturucuyu kullanın

Araçlar sayfasındaki gradient oluşturucuda ilk rengi, ikinci rengi ve açıyı seçin. Önizleme anlık değişir; CSS kopyalama düğmesiyle kodu kendi stil dosyanıza aktarabilirsiniz. Üretilen kodu kopyaladıktan sonra projede bir kez daha doğrulayın.

• İki rengi seçin.
• Açıyı sürükleyerek önizlemeyi izleyin.
• CSSyi kopyalayıp ilgili öğeye uygulayın.

6. Gradyan üzerinde yazı ve performans

Tek bir metin rengi, gradyanın açık ve koyu bölgelerinin tamamında yeterli kontrast sağlamayabilir. Yazıyı koyu yarı saydam panelde göstermek veya daha dengeli renk seçmek gerekebilir. Durağan gradyan ile ağır hareketli animasyonun performans etkisini aynı varsaymayın.

• Metin olan bütün bölgelerin kontrastını sınayın.
• Hover ve focus durumlarını unutmayın.
• Animasyon eklerseniz gerçek cihazda ölçün.

7. Kopyalanabilir CSS gradient örnekleri

Aşağıdaki kurallar, farklı tasarım ihtiyaçları için başlangıçtır. linear-gradient() ve radial-gradient() CSS içinde görüntü değeri üretir. Bu nedenle genellikle background veya background-image özelliğinde kullanılır; doğrudan background-color değeri olarak kullanılamaz.

/* Yatay, iki renk */
.yatay { background: linear-gradient(to right, #1d4ed8, #0f766e); }

/* 135 derece, üç renk ve duraklar */
.uc-renk {
  background: linear-gradient(135deg,
    #1e3a8a 0%, #7c3aed 52%, #db2777 100%);
}

/* Merkezden kenara */
.dairesel {
  background: radial-gradient(circle at center,
    #e0f2fe 0%, #bae6fd 45%, #0284c7 100%);
}

to right ifadesi rengin soldan sağa ilerlemesini sağlar. 135deg yönü farklı bir açıda tarif eder. 0%, 52% ve 100% renk duraklarının konumunu belirler; her üçünde de farklı bir ton kullanılabilir.

8. Gradient türü seçme tablosu

Yalnız dekoratif amaçlı gradyanları düz arka plan rengiyle de anlaşılır olacak şekilde tasarlayın. Kritik bilgi yalnızca renk farklılığıyla verilmemelidir.

9. Gradient üzerindeki metnin kontrastını nasıl sınarsınız?

Bir başlık koyu mavi bölgede okunaklıyken açık pembe bölgeye taşındığında silikleşebilir. Kontrast değerlendirmesini yalnız ilk rengin üzerinde yapmak yeterli değildir. Başlığın geçebileceği en açık ve en koyu bölgeleri ayrı ayrı inceleyin. Mümkünse arka plana yarı saydam sabit bir metin paneli ekleyerek sonucu öngörülebilir kılın.

.hero-baslik {
  color: #ffffff;
  background: rgba(15, 23, 42, 0.92);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
}

Bu örnekte koyu panel metnin arkasındaki gradyanın etkisini azaltır. Yine de gerçek bileşik arka plan için renk kontrastı rehberindeki ölçüm yaklaşımını kullanın.

10. Gradient çalışmıyorsa neyi kontrol etmeli?

1. Gradyanı background-color yerine background veya background-image ile tanımladığınızdan emin olun.
2. Renklerin arasına virgül koyduğunuzu ve parantezin doğru kapandığını doğrulayın.
3. Bir başka background kuralının daha sonra gradyanı geçersiz kılıp kılmadığını inceleyin.
4. Öğenin görünür yüksekliği ve genişliği olduğundan emin olun.
5. Gradyanı gerçek telefon ekranında deneyin; renk dağılımı kutu boyutuna göre farklı görünebilir.
6. Animasyon eklendiyse hareket hassasiyeti ve cihaz performansını ayrıca değerlendirin.

11. Tasarımı yayımlamadan önce küçük kontrol listesi

• Gradyan, metni okumayı kolaylaştırıyor mu; yoksa dikkati gereksiz dağıtıyor mu?
• Butonların normal, hover ve klavye odağı durumları ayırt edilebiliyor mu?
• Farklı ekran ölçülerinde renk geçişi beklenmedik sınır oluşturmuyor mu?
• Görsel dosyasına gerek yoksa sırf gradyan için büyük bir görsel yükleniyor mu?
• Kopyalanan kodda yalnız iki renk mi, yoksa gerçekten gereken kadar durak mı var?

Kendi renklerinizi denemek için ücretsiz CSS gradient oluşturucuyu kullanabilirsiniz. Araçla elde ettiğiniz kodun son görünümünü gerçek sayfada mutlaka test edin.

Sık sorulan sorular

CSS gradient için görsel yüklemek şart mı?

Hayır. Modern tarayıcılar CSS gradient değerini doğrudan oluşturabilir.

linear ve radial gradient aynı mı?

Hayır. Biri doğrusal, diğeri bir merkezden dışarı doğru renk geçişi üretir.

İlgili rehberler ve araçlar

• Ücretsiz gradient aracı
• Renk kontrastı ölçme

Resmî teknik kaynaklar

• MDN — linear-gradient
• MDN — Using CSS gradients