Ücretsiz CSS Gradyan Oluşturucu — Doğrusal, Yarıçaplı & Konik Gradyanlar Oluşturun

Bu ücretsiz çevrimiçi gradyan oluşturucu ile harika CSS gradyanları tasarlayın. Doğrusal, yarıçaplı ve konik gradyan türlerinden birini seçin, renkleri ve açıları özelleştirin ve CSS kodunu anında kopyalayın.

CSS Gradyan Nedir?

CSS gradyanı, CSS'deki background özelliğini kullanarak iki ya da daha fazla renk arasında olan düzgün geçişlerdir. Gradyanlar, sayfa yükleme sürelerini azaltmak ve tamamen yanıt veren, çözünürlükten bağımsız arka planlar oluşturmak için görüntü dosyalarına ihtiyaç duymamak anlamına gelir.

CSS gradyanlarının üç ana türü vardır:

• Doğrusal gradyanlar, bir açı ya da yöne göre düz bir çizgi boyunca renk geçişlerini sağlar.
• Yarıçaplı gradyanlar, merkez noktadan dışarıya doğru yayılır ve daire veya elips desenler oluşturur.
• Konik gradyanlar, merkez noktada dönen bir tarzda renk geçişlerini sağlar ve renk tekerleği gibi görünür.

Bu Gradyan Oluşturucuyu Nasıl Kullanılır

1. Gradyan türü seçin — Kontrol panelinin üst kısmından Doğrusal, Yarıçaplı veya Konik türlerinden birini seçin.
2. Yönü ayarlayın — Doğrusal ve konik gradyanlar için açıyı kaydırma çubuğu ya da hızlı seçme butonları ile ayarlayın.
3. Yarıçaplı ayarları özelleştirin — Yarıçaplı gradyanlar için şekil (daire veya elips) ve boyut anahtar kelimesi seçin.
4. Renk duraklarını düzenleyin — Renk seçiciye tıklayarak her durakın rengini değiştirin. Pozisyon kaydırma çubuğuna tıklayarak her rengin nerede görüneceğini ayarlayın.
5. Renk ekleme veya kaldırma — Daha fazla durak için "Renk Ekle" butonuna tıklayın (maksimum 8), ya da X'e tıklayarak bir durak kaldırın (en az 2).
6. Ön tanımlı bir gradyan deneyin — Hazır bir gradyan yüklemek için herhangi bir ön tanımlı swatch'a tıklayın.
7. CSS'yi kopyalayın — "CSS'yi Kopyala" butonuna tıklayarak tam background özelliğini panonuza kopyalayın.

Ana Özellikler

Özellik	Fayda
Üç gradyan türü	Doğrusal, yarıçaplı ve konik — tüm CSS gradyan modelleri desteklenir
Canlı önizleme	Ayarlara dokunurken gradyanınızın anında güncellenmesini sağlar
8 renk durakına kadar	Duyarlı konumlamalı çok renkli gradyanlar oluşturmak için
Açı kontrolü	0°–315° arası yaygın açılar için kaydırma çubuğu + hızlı seçme butonları
Yarıçaplı şekil ve boyut	Dört CSS boyut anahtar kelimesiyle daire/Elips şekilleri
Bir tıklamayla ön tanımlılar	Hızlı başlangıç için seçilmiş 6 gradyan ön tanımlısı
CSS kodu kopyalama	Üretim hazıra CSS kodunu panonuza kopyalamak için bir tıklama
Veri gönderilmemiş	Her şey tarayıcınızda çalışır — sunucu, izleme yok

Gradyan Türlerinin Karşılaştırılması

Özellik	Doğrusal	Yarıçaplı	Konik
Yönlendirme	Açı (0–360°)	Şekil + boyut anahtarı	Başlangıç açısı
Desen	Düz çizgi	Merkezden dışarıya doğru daire veya elips	Dönen tarz
En iyi uygulamalar	Arka planlar, afişler, butonlar	Işık efekti, küreler, soyut sanat	Pasta grafikleri, renk tekerlekleri, saatler
CSS fonksiyonu	linear-gradient()	radial-gradient()	conic-gradient()

Gerçek Hayat Uygulamaları

Web Sitesi Arka Planları

Modern ve profesyonel görünümlü sayfalar için düz renkler yerine ince gradyanlar kullanın. 135° açılı iki yakın renkli bir doğrusal gradyan, derinlik eklerken dikkat dağıtmaz.

Butonlar ve CTAs

Vibrant gradyanlarla call-to-action butonlarını öne çıkarın. 180° (üstten alta) gradyan, doğal bir ışık-gölge efekti oluşturur.

Hero Bölümleri

Dikkat çeken hero afişleri oluşturmak için koyu renkli çok duraklı gradyanlar kullanın. Üç veya daha fazla renk kombinasyonuyla benzersiz bir marka görünümü oluşturun.

Overlay'ler ve Kartlar

Görüntülerin üzerine yarı şeffaf gradyanlar uygulayarak metnin okunabilirliğini sağlarken görsel ilgiyi koruyun.

Veri Görselleştirme

JavaScript veya SVG olmadan konik gradyanlarla basit pasta grafikleri, ilerleme halkaları veya renk tekerlekleri oluşturun.

Daha İyi Gradyanlar İçin İpuçları

• 2–3 renk kullanın için temiz ve profesyonel tasarımlar. Daha fazla durak kullanılabilir ancak dikkatli ayarlama gerekir.
• Benzer tonlar için ince gradyanlar (örneğin, açık mavi ile koyu mavi) ve tamamlayıcı renkler için kuvvetli gradyanlar kullanın.
• Düzeninize uygun açı seçin — 180° dikey bölümler için iyi, 90° yatay çubuklar için iyi.
• Karanlık ve açık temalar için test edin — Beyaz arka plan üzerinde iyi görünen bir gradyan karanlık modda ayarlanmaya ihtiyaç duyar olabilir.
• background-size ve background-repeat kullanın — Küçük gradyanları desenler haline getirmek için.
• Şeffaflıkla birlikte kullanın — rgba() renkleriyle arka plan içerikleriyle uyumlu gradyanlar oluşturun.

CSS Gradyan Sözdizimi Anlamak

Bir temel doğrusal gradyan:

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Bir şekil ve boyut ile yarıçaplı gradyan:

background: radial-gradient(circle farthest-corner, #667eea 0%, #764ba2 100%);

Bir konik gradyan:

background: conic-gradient(from 0deg, #667eea 0%, #764ba2 50%, #667eea 100%);

Modern tüm tarayıcılar bu gradyan türlerini vendor prefix olmadan tamamen destekler.

Sıkça Sorulan Sorular

CSS gradyanında kaç renk kullanabilirim?

CSS, herhangi bir sayıda renk duraklarını destekler. Bu araç, uygulamalarda pratik olarak 8'e kadar izin verir. Gerçek projelerde 2–4 durak en yaygındır.

Doğrusal ve yarıçaplı gradyanlar arasında ne fark vardır?

Doğrusal gradyanlar, belirli bir açıda düz bir çizgi boyunca renk geçişlerini sağlar. Yarıçaplı gradyanlar, merkez noktadan dışarıya doğru dairesel veya eliptik bir şekilde renk geçişlerini sağlar.

CSS gradyanları tüm tarayıcılarda mı çalışır?

Evet. Chrome, Firefox, Safari, Edge gibi modern tüm tarayıcılar linear-gradient, radial-gradient ve conic-gradient fonksiyonlarını vendor prefix olmadan tamamen destekler.

CSS gradyanlarını animasyonlaştırmak mümkün mü?

CSS, doğrudan geçişlerle gradyan değerleri arasında animasyon yapamaz. Ancak background-position kullanarak gradyan pozisyonunu animasyonlayabilirsiniz veya destekleyen tarayıcılarda CSS @property ile özel özellik animasyonları kullanabilirsiniz.

Bir gradyanı şeffaf yapmak nasıl yapılır?

rgba() veya hsla() renk değerleriyle birlikte alfa kanalı kullanın. Örneğin, rgba(102, 126, 234, 0.5) renk değerinin yarım şeffaf bir sürümünü verir.

Bu araç gradyan verilerimi saklar mı?

Hayır. Tüm gradyan oluşturma işlemi tarayıcınızda tamamen gerçekleşir. Hiçbir veri sunucuya gönderilmemektedir.