CSS Gradyan Oluşturucu

CSS gradyan, görüntü dosyaları kullanmadan iki veya daha fazla renk arasında yumuşak geçişler görüntüleyen bir CSS görüntü değeridir. Gradyanlar tarayıcı tarafından oluşturulur ve çözünürlükten bağımsız, yüksek performanslıdır.

Bu oluşturucu üç türü destekler: linear-gradient (düz bir çizgide renkler), radial-gradient (merkezden yayılan renkler) ve conic-gradient (bir saat kadranı gibi merkez etrafında dönen renkler).

Doğrusal gradyanlar renkleri bir açı veya yön anahtar kelimesi ile tanımlanan düz bir çizgide geçirir. Radyal gradyanlar renkleri merkezden dışa doğru dairesel veya eliptik şekillerde geçirir.

İhtiyacınız olduğu kadar renk durağı kullanabilirsiniz. Her durak bir renk ve isteğe bağlı olarak gradyan çizgisi üzerinde bir konum (%0 ile %100) tanımlar. Birden fazla durak karmaşık çok renkli geçişler oluşturur.

Oluşturulan CSS kodunu kopyalayın ve CSS stil sayfanızda background veya background-image özelliğinin değeri olarak yapıştırın. Kod tüm modern tarayıcılarda çalışır.

Renk durakları, gradyan çizgisi boyunca belirli konumlarda belirli renkleri tanımlar. Örneğin "red 0%, blue 50%, green 100%" kırmızı başlayıp ortada maviye geçen ve yeşil biten bir gradyan oluşturur.

Evet, doğrusal gradyanlar 0deg ile 360deg arasındaki açı değerlerini destekler. Yaygın açılar için "to right", "to bottom", "to top left" gibi yön anahtar kelimelerini de kullanabilirsiniz.

Evet, CSS gradyanları vektör tabanlı ve tarayıcı tarafından oluşturuldukları için doğuştan duyarlıdırlar. Kalite kaybı olmadan veya dosya boyutu artmadan herhangi bir kapsayıcı boyutuna mükemmel şekilde ölçeklenirler.

CSS gradyanları genellikle çok performanslıdır. Görüntü dosyaları için HTTP isteklerini ortadan kaldırır ve donanım hızlandırmalıdır. Ancak çok sayıda durağa sahip son derece karmaşık gradyanlar düşük uç cihazlarda performansı etkileyebilir.

Evet, gradyanlar background-image, border-image, mask-image ve CSS görüntü değerleri kabul eden herhangi bir özellik için kullanılabilir.

Chrome, Firefox, Safari, Edge ve Opera dahil tüm modern tarayıcılar CSS gradyanlarını destekler. IE10'dan beri destek mükemmeldir. Satıcı önekleri artık gerekli değildir.

Standart sürümler yerine repeating-linear-gradient veya repeating-radial-gradient kullanın. Bunlar tüm öğeyi doldurmak için gradyan desenini tekrarlayarak çizgili veya desenli efektler oluşturur.

CSS gradyanları doğrudan CSS geçişleriyle canlandırılamaz. Ancak background-position, background-size'ı canlandırabilir veya @property ile özel CSS özellikleri kullanarak gradyan animasyon efektleri oluşturabilirsiniz.

Evet, bu CSS gradyan oluşturucu tamamen ücretsizdir. Kayıt gerekmez, kullanım sınırı yoktur ve oluşturulan tüm kod herhangi bir projede atıfta bulunulmadan kullanılabilir.