TR

CSS gradient oluşturucu

CSS gradient oluşturucu ile renk geçişinin türünü, yönünü ve renklerini seçin. Her renk durağını renk seçici ve kaydırıcıyla ayarlayın, yenilerini “+ Renk durağı” ile ekleyin. Araç gradyanı kısa ve geçerli CSS olarak yazar ve düz bir yedek arka plan rengi (background-color) ekler; böylece metin gradyan olmadan da okunabilir kalır.

Gradyanı tasarlayın

background-color: #675BF0;
background-image: linear-gradient(90deg, #3B82F6 0%, #9333EA 100%);
°
0° = yukarı, 90° = sağa, 180° = aşağı (varsayılan)
Her satıra bir durak: bir renk ve isteğe bağlı % konumu, ör. #3B82F6 0%
Boş bırakırsanız gradyan renklerinin ortalaması kullanılır
Girdileriniz yalnızca bu tarayıcıda saklanır.

Sonuç

CSS bildirimi
background-color: #675BF0; background-image: linear-gradient(90deg, #3B82F6 0%, #9333EA 100%);
Yalnızca gradyan (background-image için)
linear-gradient(90deg, #3B82F6 0%, #9333EA 100%)
Yedek renk (background-color)
#675BF0
Hesaplanan konumlarıyla renk durakları
No.RenkVerilen konumKullanılan konum
1#3B82F60 %0 %
2#9333EA100 %100 %

Nasıl hesaplanır?

Üç tür gradyan

FonksiyonRenk geçişiVarsayılan (belirtilmezse)
linear-gradient()seçilen açıda düz bir çizgi boyunca180deg = yukarıdan aşağıya
radial-gradient()merkezden dışarıya doğruelips, ortalanmış, en uzak köşeye kadar
conic-gradient()merkezin etrafında, pasta grafiği gibi0deg’den (üst) saat yönünde

Doğrusal gradyanda açı yönü belirler: 0deg yukarıyı, 90deg sağı, 180deg aşağıyı gösterir. “Tekrarla” seçeneği repeating-linear-gradient() ve benzerlerini üretir: ilk ve son durak arasındaki desen tekrar eder – çizgili desenler için ideal.

Renk durakları ve eksik konumlar

Konumlar isteğe bağlıdır. Eksik olduklarında W3C spesifikasyonu (CSS Images, “Coloring the Gradient Line”) geçerlidir: ilk durak %0’da, son durak %100’de durur; aradaki konumsuz duraklar eşit aralıklarla dağıtılır. Bir konum önceki bir konumdan küçükse ona eşitlenir – keskin kenarlar böyle oluşur. Art arda iki konum (red 0% 50%) düz bir şerit oluşturur. Tablo, tarayıcının her durak için gerçekte kullandığı konumu gösterir.

Yedek renk neden gerekli?

Gradyanlar birer görseldir. Görsel çizilmezse – örneğin zorunlu renkler modunda ya da değerdeki bir yazım hatası yüzünden – geriye yalnızca background-color kalır. Oluşturucu bunun için renklerin kapladıkları alana göre ağırlıklı ortalamasını kullanır.

Örnek linear-gradient(90deg, #3B82F6 0%, #9333EA 100%): her renk çizginin yarısını kaplar. Kırmızı (59 + 147) ÷ 2 = 103, yeşil (130 + 51) ÷ 2 = 90,5 ≈ 91, mavi (246 + 234) ÷ 2 = 240 – yedek renk #675BF0. Metninizin bu renkle ve gradyanın en açık ve en koyu bölümleriyle kontrastını kontrol edin.

Sıkça sorulan sorular

CSS’te gradient nasıl yapılır?

background-image: linear-gradient(90deg, #3B82F6, #9333EA); kullanın – ya da kısa yol olan background özelliğini. Önüne yedek olarak bir background-color ekleyin. Oluşturucu iki satırı da kopyalanmaya hazır verir.

Yumuşak geçiş yerine keskin kenarları nasıl elde ederim?

İki durağa aynı konumu verin, ör. red 50%, blue 50%, ya da bir renge iki konum verin: red 0% 50%, blue 50% 100%. Çizgili desen için “Tekrarla” seçeneğini açın.

conic-gradient her tarayıcıda çalışır mı?

Tüm güncel tarayıcılarda evet (Chrome ve Edge 69 sürümünden, Firefox 83’ten, Safari 12.1’den beri). Çok eski tarayıcılarda yedek renk alanın boş kalmasını önler.

Saydam renkler kullanabilir miyim?

Evet. Durağı rgba() ya da 8 haneli HEX değeri olarak girin, ör. rgba(0, 0, 0, 0.5). Önizleme saydamlığı dama deseni üzerinde gösterir. Yedek renk her zaman düzdür.

Kaynaklar ve yasal dayanak

Güncelleme:

Benzer araçlar