CSS gradyan oluşturucu
Bir gradyanı görsel olarak oluşturun ve CSS'i kopyalayın.
- Tarayıcınızda çalışır — metniniz hiçbir yere gönderilmez
- Kayıt yok, kota yok, istediğiniz sıklıkta ücretsiz kullanın
Nasıl çalışır
Gradyanlar CSS'te, söz dizimi yanlış hatırlanması kolay tek bir bildirim olarak yazılır; özellikle açı kuralı ve renk duraklarının nereye gideceği. Ayarlarken sonucu görmek, kontrol etmek için bir sayfayı yeniden yüklemekten daha hızlıdır.
Açı kuralı insanları şaşırtır
CSS'te 0 derece yukarıyı gösterir ve açı saat yönünde artar; bu yüzden 90 derece soldan sağa, 180 derece yukarıdan aşağı gider. Bu, matematiksel kuraldan ve birkaç tasarım aracından farklıdır; başka yerden kopyalanan bir gradyanın sık sık döndürülmüş çıkmasının nedeni budur.
Üç tür
Doğrusal, düz bir çizgi boyunca ilerler ve gerçek kullanımların neredeyse tamamını kapsar. Radyal bir noktadan dışarı yayılır; parıltılara ve spot ışıklarına uygundur. Konik bir merkezin etrafında süpürür ve pasta grafikleri ile renk çarkları bundan yapılır.
Gradyan bir resimdir, renk değil
İnsanları takıntıya düşüren diğer şey budur. CSS bir gradyanı arka plan resmi olarak ele alır; bu yüzden background ve background-image içinde çalışır ama color, border-color veya düz renk bekleyen başka hiçbir şeyde çalışmaz. Metin gradyanları, ayrı bir teknik olan background-clip gerektirir.
Ortaya bir renk eklemek
İki durak temiz bir karışım verir. Üçüncüsü, geçişi başka bir tondan geçirmenizi sağlar; bu, iki zıt rengin doğrudan karıştığında ortaya çıkan bulanık griyi önler.
CSS gradyan oluşturucu — sorular
Açı hangi yöne gider?
0 derece yukarıyı gösterir ve açılar saat yönünde artar; bu yüzden 90 derece soldan sağadır.
Gradyanım neden metinde çalışmıyor?
Gradyan bir arka plan resmidir, renk değildir. Metin gradyanları ayrı bir adım olarak background-clip gerektirir.
Radyal veya konik ne zaman kullanılmalı?
Parıltılar ve spot ışıkları için radyal, pasta grafiği ve renk çarkı efektleri için konik. Doğrusal, diğer çoğu durumu kapsar.