Utilore

CSS Gradyan Oluşturucu

Kaydırıcıları sürükleyin ve üstteki panelin onlarla birlikte değişmesini izleyin. Görüntü istediğiniz gibi olduğunda satırı kopyalayıp stil dosyanıza yapıştırın, başka bir şey gerekmez.

Açı, doğrusal ve konik geçişler için geçerlidir; dairesel olan merkezden yayılır.

Renk durakları

    Nasıl kullanılır

    1. Türü seçin: doğrusal bir çizgi boyunca ilerler, radyal merkezden dışarı yayılır, konik ise merkezin çevresinde döner.
    2. Açıyı ayarlayın ve durakları renklerin buluşmasını istediğiniz yere taşıyın.
    3. İki renk yetmiyorsa durak ekleyin ya da «Şaşırt beni» düğmesine basın.
    4. Önizlemenin altındaki CSS satırını kopyalayın.

    Bilmekte fayda var

    Önizleme neden dama deseninin üzerinde duruyor

    Bir gradyan çoğu zaman saydam bir renkte biter ve düz beyaz bir panelde bu, donuk bir renkten ayırt edilemez. Dama deseni, rengin tam dolu olmadığı her yerde arkadan görünür; böylece ayarladığınız şeyle gördüğünüz şey aynı olur. Bu alışkanlık tam da bu nedenle görüntü düzenleyicilerden ödünç alınmıştır.

    Kod yazılmadan önce duraklar sıralanır

    CSS renk duraklarını sizin yerinize sıraya dizmez: %30'daki bir duraktan önce yazılmış %70'lik bir durak, tarayıcının ikinciyi kırpmasına yol açar ve gradyan sessizce bir rengini kaybeder. Araç satırı kurarken durakları konumlarına göre sıralar, böylece bir kaydırıcıyı komşusunun ötesine sürüklemek sonucu asla bozmaz.

    Sık sorulan sorular

    Üç tür arasındaki fark nedir?

    Doğrusal gradyan düz bir çizgi boyunca ilerler ve bir açı alır: 90deg soldan sağa, 180deg yukarıdan aşağıya gider. Radyal olan merkezden dairelerle yayılır, parıltılar ve ışık lekeleri için uygundur. Konik gradyan ise bir noktanın çevresinde saat ibresi gibi döner; pasta grafikleri ve renk çarkları bundan kurulur.

    Saydamlıklı bir gradyanı nasıl yaparım?

    Bir renk seçin ve tarayıcınız alfa kanalı sunuyorsa seçicide saydamlığını düşürün, ya da kopyaladığınız satırı elle düzenleyin: rgba(31, 95, 214, 0) da tıpkı dolu bir renk gibi durak olarak çalışır. Saydama giden geçiş, beyaza giden geçişten daha kullanışlıdır, çünkü her arka planın üstünde işe yarar.

    Metin rengi olarak kullanabilir miyim?

    Evet, iki satır daha ekleyerek: gradyanı background-image özelliğine verin, sonra background-clip: text ve color: transparent ekleyin. Yazı biçimini korur ve gradyan harflerin içinden görünür.

    Aynı açı radyal modda neden farklı görünüyor?

    Orada hiç uygulanmaz. Radyal gradyan merkezden başlar ve bir yönü yoktur, bu yüzden açı doğrusal ve konik modlar için kalır; oralarda dönüşün nereden başlayacağını belirler.

    İlgili araçlar