DevTulz Online

CSS Degrade Oluşturucu

Renk durakları

CSS Degrade Nedir?

CSS degradeler, resim dosyaları kullanmadan iki veya daha fazla renk arasında yumuşak geçişler görüntülemenizi sağlar. Üç tür vardır: linear-gradient (düz bir çizgi boyunca), radial-gradient (merkez noktadan yayılan) ve conic-gradient (merkez nokta etrafında dönen). Degradeler arka planlar, düğmeler, kaplamalar ve dekoratif öğeler için kullanılır.

CSS Degrade Oluşturucu Nasıl Kullanılır

  1. Örneklerden bir ön ayar seçin veya kendi degradenizi yapılandırın.

  2. Degrade türünü seçin: linear, radial veya conic.

  3. Açıyı (linear/conic için) veya şekli (radial için) ayarlayın.

  4. Renk duraklarını düzenleyin — renkleri ve konumları (0–100%) değiştirin.

  5. Gerektiğinde renk durağı ekleyin veya kaldırın.

  6. CSS'yi kopyalayın ve stil sayfanıza yapıştırın.

Sık Sorulan Sorular

Şeffaf bir gradyan nasıl yaparım? Tam şeffaflık için rgba() veya hsla() renk değerlerini alfa kanali 0 ile kullanın. Örneğin, rgba(0,0,0,0) renk durağı tam şeffaf siyahtır, görüntülerde solma efektleri için kullanışlıdır.

Sabit bir renk durağı (geçiş yok) nasıl yaparım? İki renk durağını aynı konuma yerleştirin — biri sona eriyor, diğeri o noktada başlıyor. Örneğin, %50 kırmızı, %50 mavi, orta noktada gradyan geçişi olmadan kırmızıdan maviye anında geçiş oluşturur.

Hangi tarayıcılar konik gradyanları destekler? Konik gradyanlar tüm modern tarayıcılarda desteklenir (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). Internet Explorer tarafından desteklenmez.

Aynı elemanda birden fazla gradyan kullanabilir miyim? Evet. CSS arka planı virgülle ayrılmış katman listesini kabul eder. Gradyanları yığabilir, bunları arka plan görüntüleriyle birleştirebilir ve her katmanın konumunu ve boyutunu bağımsız olarak kontrol edebilirsiniz.

Keywords: CSS degrade oluşturucu, doğrusal degrade, radyal degrade, konik degrade, CSS arka plan oluşturucu, degrade renk seçici, CSS gradient aracı