CSS Gradyan (Renk Geçişi) Üretici

Nasıl çalışır?

Sol panele renklerinizi yazın: her satıra bir renk gelir ve satır sırası geçiş sırasıdır. HEX, RGB ve HSL yazımlarının hepsi tanınır. Bir rengin geçişteki yerini kendiniz belirlemek isterseniz satırın sonuna yüzde ekleyin: "#2F6FED 30" yazdığınızda o renk geçişin yüzde 30 noktasına sabitlenir, konum yazılmayan renkler kalan aralığa eşit dağıtılır. Geçiş türünü seçin — doğrusal geçişte açı kaydırıcısı yönü belirler (90 derece soldan sağa, 180 yukarıdan aşağı), konik geçişte başlangıç açısıdır, dairesel geçiş hep merkezden dışa doğrudur. Önizleme her tuş vuruşunda yenilenir. Sağ paneldeki CSS'te ilk renk ayrıca düz zemin olarak yazılıdır; gradyanı çizemeyen çok eski bir istemcide bile alan boş kalmaz. Kodu kopyalayabilir ya da İndir düğmesiyle aynı geçişi 1920×1080 piksellik bir PNG olarak kaydedebilirsiniz.

Bu araç css gradient generator, css gradyan, gradient arka plan, degrade arka plan aramalarıyla da biliniyor.

linear-gradient nedir?

linear-gradient, iki ya da daha çok rengi düz bir çizgi boyunca birbirine eriten CSS fonksiyonudur. İlk parametresi yön açısıdır: 0 derece alttan üste, 90 derece soldan sağa, 180 derece yukarıdan aşağı akar. Ardından renk durakları gelir; her durak bir renk ve isteğe bağlı bir konum taşır. Tarayıcı iki durak arasındaki her pikseli matematiksel olarak harmanlar, bu yüzden çıktı bir görsel dosyası değil, her çözünürlükte keskin kalan ve tek satırla rengi değiştirilebilen bir çizim talimatıdır.

Renk durağı (color stop) nedir?

Renk durağı, bir gradyanın belirli bir noktasında hangi rengin tam değeriyle görüneceğini söyleyen çifttir: renk ve yüzde konumu. "#2F6FED 30%" yazımı, geçişin yüzde 30 noktasında bu rengin saf halinin bulunacağı anlamına gelir; iki durak arasında kalan pikseller iki rengin karışımıdır. İki durağa aynı konumu verirseniz geçiş yerine keskin bir kenar elde edersiniz — bu araçta konum yazmadığınız duraklar aralığa eşit dağıtılır, yazdıklarınız olduğu yerde kalır.

linear-gradient ile radial-gradient arasındaki fark nedir?

İkisi de renkleri aynı kurallarla harmanlar; fark geçişin izlediği geometridedir. linear-gradient renkleri düz bir çizgi boyunca akıtır: çizginin açısını siz seçersiniz ve aynı çizgiye dik her kesitte renk aynıdır — kenardan kenara akan zeminlerin, şeritlerin ve düğme dolgularının aracıdır. radial-gradient ise bir merkezden dışa doğru halkalar halinde açılır: ilk durak merkezde, son durak en dış halkadadır ve yön kavramı yoktur, bu yüzden açı ayarı ona işlemez. Spot ışığı, vinyet ve odak vurgusu gibi "içeriden dışarıya" okunan etkiler dairesel geçişle kurulur.

Konik geçişte dikiş çizgisi ve şeritlenme tuzağı

Konik geçiş bir tam tur döner ve başladığı noktaya geri gelir. Son renginiz ilk renginizle aynı değilse turun kapandığı yerde keskin bir dikiş çizgisi oluşur — bu bir hata değil, biçimin doğasıdır. Kesintisiz bir halka istiyorsanız son satıra ilk rengi bir kez daha yazın; araç konumları buna göre dağıtır.

İkinci tuzak şeritlenmedir: birbirine çok yakın iki ton geniş bir alana yayıldığında, ekranın kanal başına 256 seviyesi yumuşak geçişi taşımaya yetmez ve gözle görülür basamaklar oluşur. Tonları biraz ayırmak, geçiş alanını daraltmak ya da araya bir ara durak eklemek şeritleri kırar.

Hangi geçiş türü nerede kullanılır?

Tür seçimi görsel bir zevk sorusu olduğu kadar işlev sorusudur; üçünün de yerleşik kullanım alanları vardır.

• Doğrusal → düğme ve kart zeminleri, başlık şeritleri, sayfa arka planları
• Dairesel → spot ışığı etkisi, vinyet, dikkat odağı
• Konik → pasta grafiği, renk çemberi, yükleme halkası göstergeleri
• PNG çıktısı → CSS'in işlemediği yerler: sunum arka planı, e-posta şablonu, duvar kâğıdı

Sık sorulanlar

Renklerin geçişteki konumlarını nasıl belirlerim?

Satırın sonuna 0-100 arası bir sayı ekleyin: "#DB2777 75" o rengi yüzde 75 noktasına koyar. Yüzde işareti isteğe bağlıdır; konum yazılmayan renkler kalan aralığa eşit dağıtılır.

İndir düğmesi ne kaydediyor?

Önizlemedeki geçişin 1920×1080 piksellik PNG halini. CSS kodunun kendisi için Çıktıyı kopyala düğmesini kullanın; kod panoya olduğu gibi alınır.

Kaç renk kullanabilirim?

2 ile 12 arası. İki renk çoğu iş için yeterlidir; çok duraklı geçişlerde sırayı satır sırasıyla, konumları satır sonundaki yüzdelerle yönetirsiniz.

Üretilen CSS eski tarayıcılarda çalışır mı?

linear-gradient ve radial-gradient uzun yıllardır her güncel tarayıcıda çalışır. conic-gradient daha yenidir (2020 sonrası sürümler); çok eski bir istemcide devreye giren şey, kodun içindeki düz background-color satırıdır.