CSS Gradyanlar
Düz renkler ve fotoğraflar birçok arka planı karşılar. Bazen renkler arasında yumuşak bir karışım istersiniz — sakin bir banner, parlak bir kart, kocaman dosya olmadan gökyüzü. Bu karışım gradyandır; CSS onu özel bir background-image gibi çizer.
CSS gradyanı nedir?
Gradyan, tarayıcının ürettiği bir görseldir — indirdiğiniz JPG değil. linear-gradient() ve radial-gradient() gibi işlevlerle tanımlar, sonra background-image (veya background kısayolu) içine koyarsınız. Sonuç, fotoğraf arka planı gibi içeriğin arkasında durur.
Türler bir bakışta
Bu ikisiyle başlayın. Konik olanlar bekleyebilir.
📊 Günlük CSS gradyan türleri
| Tür | İşlev | Günlük kullanım |
|---|---|---|
| Doğrusal | linear-gradient(…) |
Banner’lar, düğmeler, bölüm yıkaması sol→sağ veya üst→alt |
| Radyal | radial-gradient(…) |
Yumuşak spotlight kartlar, merkezden dairesel solma |
| Yön sözcükleri | to right, to bottom |
Açı olmadan okunaklı doğrusal yön |
| Açı | 45deg, 90deg |
Sözcük yetmezken net eğim |
| Renk durakları | teal 0%, navy 100% |
Her rengin karışımda oturduğu yer |
Doğrusal: iki renk, soldan sağa
En basit doğrusal gradyan bir yön ve en az iki renk ister. CSS aralarında karıştırır.
Basit sol→sağ doğrusal gradyan
css.banner {
background-image: linear-gradient(to right, #0f766e, #0f172a);
color: #f8fafc;
padding: 2rem;
}İşlevi okuyun
to right yöndür. #0f766e başlar; #0f172a biter. Tarayıcı ortayı doldurur.
Açılar ve daha fazla durak
Çapraz yıkama için açı kullanın; daha zengin karışım için orta duraklar ekleyin.
Üç duraklı açılı doğrusal
css.hero {
background-image: linear-gradient(
135deg,
#0f766e 0%,
#134e4a 45%,
#0f172a 100%
);
color: white;
min-height: 10rem;
padding: 2rem;
}Durak alışkanlığı
Renk durağı «şu renk burada» demektir. Yüzdeler kolay okunur. Konumları yazmayabilirsiniz — tarayıcı eşit aralık verir.
Radyal: merkezden solma
radial-gradient() bir merkezden dışa yayılır — yumuşak kartlar ve odak ışıltıları için kullanışlıdır.
Yumuşak radyal kart
css.card {
background-image: radial-gradient(circle at center, #ccfbf1, #0f766e);
color: #042f2e;
padding: 1.5rem;
}Daire ipucu
circle at center şekli yuvarlak ve ortada tutar. Sonra at top veya at 20% 30% başka yerde spotlight için.
Gradyanlar background-image üzerinde yaşar
Gradyan işlevini color içine koymayın — o metni boyar. Gradyanlar arka plan görselleridir; metin karşıtlığı hâlâ önemlidir.
Yedek renkli kısayol
css.panel {
background: #0f172a linear-gradient(to bottom, #115e59, #0f172a);
color: #ecfdf5;
padding: 1.5rem;
}Kendiniz deneyin
.bannerilelinear-gradient(to right, #0f766e, #0f172a)ve açık metin.- Yönü
to bottomyapın — karışım ekseni döner. .heroile135degve üç durak (teal → orta → navy)..cardileradial-gradient(circle at center, #ccfbf1, #0f766e).- İsteğe bağlı:
backgroundkısayolunda gradyandan önce düz yedek renk.
Sık hatalar
color: linear-gradient(…)yazmak — gradyan metin rengi değildir- Tek renk durağı — karıştırmak için en az iki renk gerekir
- Bunun
background-imageolduğunu unutmak (karşıtlık ve katmanlar geçerli) - Her bölümde gürültülü gökkuşağı — yumuşak iki-üç duraklı yıkamalar daha profesyonel okunur
- Gradyanın anlamlı fotoğrafların yerini almasını beklemek (ürün çekimleri gerçek görsel kalır)
Özet
- Gradyanlar arka plan için tarayıcı üretimi görsellerdir
linear-gradient()çizgi boyunca karıştırır;radial-gradient()merkezden- Yön sözcükleri, açılar ve renk durakları görünümü kontrol eder
background-imageveyabackgroundkısayoluyla bağlayın- Üstteki metin karşıtlığını güçlü tutun
- Ağır hilelerden önce bir doğrusal banner ve bir radyal kart pratik edin
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek