Sade bir hero gradient'ı
CSS
.hero { background: linear-gradient(135deg, #6c8cff 0%, #b18cff 100%);}İki renkli, çapraz bir gradient. Klasik indie-SaaS hero görünümü — göze hoş gelir ve metni boğmaz.
CSS Gradient Üretici
CSS gradyanlarını canlı kod çıktısıyla görsel olarak tasarla.
Son güncelleme
Önizleme2 durak
Renk durakları
- 0%
- 100%
CSS
background: linear-gradient(135deg, #b18cff 0%, #5ac8c8 100%);CSS gradient üretici nedir?
CSS gradient üretici; CSS'teki linear-gradient, radial-gradient ve conic-gradient fonksiyonları için görsel bir editördür. Renk duraklarını elle yazma derdinden kurtarır: renkleri bir şerit üzerinde sürüklersin, önizleme anında güncellenir, çıkan üretime hazır CSS'i doğrudan stil dosyana yapıştırırsın.
Gradient'lar modern arayüzün her yerinde: hero alanları, kart overlay'leri, buton durumları, glow efektleri, dark mode'daki o ince geçişler, loading skeleton'ları ve dekoratif kenarlıklar. Bir gradient'ı elle okuyup yazabilmek seni hızlandırır — ama fikir taslağı çıkarmak için görsel bir üreticinin önüne geçilemez.
CSS üç tür gradient destekler. *Linear* belirlediğin açıda düz bir çizgi boyunca ilerler. *Radial* bir noktadan daire ya da elips şeklinde dışarı doğru yayılır. *Conic* ise renkleri bir saatin akrebi gibi merkezin etrafında döndürür. Her birinin kendi kullanım yeri vardır — ve istersen tek bir arka planda birden fazlasını üst üste bindirebilirsin.
Gradient tasarlarken öğreneceklerin
- Bir gradient *yön* (ya da şekil) ve *renk durakları* — opsiyonel pozisyonu olan renkler — ile tanımlanır.
- Aynı pozisyondaki iki renk durağı *sert geçiş* oluşturur; çizgili desenler veya ikiye bölünmüş arka planlar için ideal.
oklchgibi modern renk uzayları,rgbveyahsl'e göre algısal olarak çok daha pürüzsüz ve dengeli geçişler üretir.
Adım adım CSS gradient nasıl yapılır
Gradient türünü seç
Düz bir renk geçişi için linear, dairesel bir kayboluş için radial, merkez etrafında dönen bir geçiş için conic'i tercih et.
Açıyı veya konumu ayarla
Linear için derece cinsinden açı seç (CSS'te
0degaşağıdan yukarıyadır). Radial ve conic için ise merkez konumunu belirle.Renk duraklarını ekle ve yerleştir
İstediğin kadar renk ekle. Her durağı şerit boyunca sürükleyerek konumunu değiştirebilirsin. Aynı pozisyona iki durak koyarsan keskin bir kenar elde edersin.
Gerçek bir şekil üzerinde önizle
Tam genişlikte hero, kart ve buton arasında geçiş yaparak gradient'ın farklı en/boy oranlarında nasıl durduğunu gör.
CSS'i kopyala
Üretime hazır
backgroundtanımını kopyala ve stil dosyana yapıştır.
CSS gradient hızlı başvuru
Üç gradient fonksiyonu ve içlerine giren parçalar. Detaylı referans için MDN: linear-gradient, radial-gradient, conic-gradient.
| Fonksiyon | Ne yapar | Örnek |
|---|---|---|
linear-gradient | Bir çizgi boyunca renk geçişi | linear-gradient(135deg, #6c8cff, #b18cff) |
radial-gradient | Renk bir noktadan dışa yayılır | radial-gradient(circle at 30% 20%, #fff, #000) |
conic-gradient | Renk merkez etrafında döner | conic-gradient(from 0deg, red, yellow, red) |
repeating-linear-gradient | Tekrar eden çizgi deseni | repeating-linear-gradient(45deg, #000 0 10px, #fff 10px 20px) |
| Renk durağı | Opsiyonel pozisyonu olan bir renk | #6c8cff 25% |
| Sert durak | Aynı pozisyon iki kez → keskin kenar | #000 50%, #fff 50% |
| Çoklu gradient | Tek elemanda üst üste | background: g1, g2, g3; |
Deneyebileceğin CSS gradient örnekleri
Radial spot ışığı
CSS
.card { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.15), transparent 40%), #1f2230;}Düz bir rengin üzerine yarı saydam bir radial vurgu bindirip yumuşak bir ışık kaynağı taklidi yap — dark mode kartlarında müthiş durur.
Sert geçişli çizgiler
CSS
.stripes { background: repeating-linear-gradient( 45deg, #1a1a1a 0 12px, #2a2a2a 12px 24px );}Aynı pozisyondaki iki durak keskin bir kenar oluşturur. repeating-linear-gradient içine sararak deseni tekrar ettirebilirsin.
Sık yapılan CSS gradient hataları
- Çok fazla renk durağı kullanmak — genelde üç-dört durak yeterli; fazlası sonucu bulanıklaştırır.
- CSS gradient'larda
0deg'nin aşağıdan yukarıya olduğunu unutmak (çoğu tasarım aracında 0° sağ tarafı gösterir, dikkat). - Yüksek kontrastlı bir gradient'ın üzerine metin koyup okunabilirliği iki uca göre kontrol etmemek — WCAG kontrast oranlarını gözden kaçırma.
CSS Gradient SSS
CSS gradient nasıl oluşturulur?
background veya background-image özelliğine değer olarak linear-gradient, radial-gradient ya da conic-gradient ver. Her fonksiyon bir yön (ya da merkez) ve renk durağı listesi alır.Linear, radial ve conic gradient arasındaki fark nedir?
Linear gradient'lar renkleri düz bir çizgi boyunca süpürür. Radial gradient'lar bir noktadan daire veya elips şeklinde dışa yayılır. Conic gradient'lar ise renkleri saatin akrebi gibi merkez etrafında döndürür.
CSS gradient'ı animasyonla canlandırabilir miyim?
Tarayıcılar gradient görüntüleri arasında pürüzsüz interpolasyon yapmaz. Standart yöntemler: hareketli bir geçiş için
background-position'ı animasyonla, iki gradient katmanı arasında opacity ile geçiş yap, ya da renk durağı olarak kullanılan CSS custom property'lerini animasyonla.Gradient'ım neden bantlı (banding) görünüyor?
Bant oluşumu, geniş bir alana çok az ayrık renk adımı yayıldığında ortaya çıkar. Ara duraklar ekle,
oklch gibi algısal bir renk uzayına geç ya da üstüne hafif bir dithering / gürültü katmanı uygula.CSS gradient'lar tüm tarayıcılarda destekleniyor mu?
Linear ve radial gradient'lar her yerde destekleniyor. Conic gradient'lar tüm modern tarayıcılarda çalışır. Çok eski tarayıcılar için gradient tanımından önce yedek bir
background-color eklemen yeterli.