Softonic

Ağ gradyan oluşturucu

4, 6 veya 9 hareketli noktadan yumuşak ve çok renkli bir arka plan oluşturun. Her noktanın rengini seçin, noktaları tuval üzerinde sürükleyin, özenle hazırlanmış rastgele bir palet deneyin ve sonucu SVG ya da PNG olarak dışa aktarın. Üst üste binen radyal gradyanlardan oluşan CSS yaklaşımını da kopyalayabilirsiniz. Proje, çalışırken bu tarayıcı sekmesinde kalır.

Ağ görünümlü gradyan nasıl oluşturulur?

  1. 1

    Izgarayı seçin

    4, 6 veya 9 kontrol noktasıyla başlayın. Daha fazla nokta, daha fazla renk bölgesi oluşturur.

  2. 2

    Renkleri seçin

    Her noktanın renk seçicisini kullanın. Düzenleyici altı haneli HEX renkleri saklar.

  3. 3

    Noktaları taşıyın

    Bir noktayı sürükleyin, yatay ve dikey konumunu girin ya da ok tuşlarını kullanın.

  4. 4

    Çıktı boyutunu seçin

    SVG ve PNG için yatay, geniş ekran veya kare boyut seçin.

  5. 5

    Tasarımı dışa aktarın

    PNG ya da SVG indirin veya radyal gradyanlardan oluşan CSS yaklaşımını kopyalayın.

Üç çıktı nasıl oluşturulur?

  • PNG önizlemeyle aynı uzaklık ağırlıklı renk karıştırma yöntemini kullanır. Farklı bir en boy oranı seçilirse aynı göreli noktalar yeni boyutlara yerleştirilir.
  • SVG aynı kontrol noktalarına üst üste binen radyal gradyanlar yerleştirir ve büyütüldüğünde keskin kalır.
  • CSS temel rengin üzerine her nokta için bir radial-gradient() katmanı ekler; ayrı bir görsel dosyası gerekmez.

SVG ve CSS aynı proje verilerini kullanır, ancak ağ görünümünün hafif yaklaşımlarıdır. Pikselleri PNG önizlemesiyle bire bir aynı olmaz.

Palet önerileri

  • Birbirine yakın tonlar genellikle yumuşak geçişler verir.
  • Zıt tonlar renk bölgelerinin sınırlarını belirginleştirir.
  • Rastgele paletler başlangıç noktasıdır; okunabilirliği garanti etmez.
  • Son arka plan üzerindeki metin, simge ve denetimlerin kontrastını kontrol edin.

Kontrol noktalarını yerleştirme

Önizlemedeki numaralı noktayı sürükleyin veya odağı üzerine getirip ok tuşlarını kullanın. Beş yüzde puanlık hareket için Shift tuşunu basılı tutun. Yatay ve dikey alanlara kesin konum da girebilirsiniz.

Noktalar kenara kadar ulaşabilir. Birkaç noktayı yakınlaştırmak renklerini tek bölgede yoğunlaştırır; aralarını açmak her renge daha fazla alan verir.

Yaygın kullanım alanları

  • Üst bölüm arka planları ve bölüm ayırıcıları.
  • Sosyal medya görselleri ve video küçük resimleri.
  • Sunum ve illüstrasyon arka planları.
  • Açılış ekranları ve dekoratif paneller.

PNG, önizlemeye en yakın çıktıdır. Keskin ölçekleme için SVG’yi, ayrı görsel olmadan düzenlenebilir arka plan için CSS’yi kullanın.

Gizlilik ve tarayıcı depolaması

Renkler, konumlar ve çözünürlük tarayıcı belleğinde ve sessionStorage içinde kalır. Huni URL’lerine veya sunucu durumuna eklenmez. Araç, proje değerlerini içermeden bir dışa aktarma yapıldığını kaydedebilir.

Proje, geçerli sekme açık kaldığı sürece sessionStorage içinden en fazla altı saat geri yüklenebilir. Sekmeyi kapatmak çoğu zaman projeyi daha erken siler; saklamak istediklerinizi indirin veya kopyalayın.

Sık Sorulan Sorular

Farklı işleme yöntemleri kullanırlar. PNG pikselleri uzaklığa göre harmanlarken SVG ve CSS radyal gradyanları üst üste koyar. Renkler ve konumlar aynıdır, ancak pikseller bire bir eşleşmez.

Evet. Noktayı sürükleyin, konum alanlarını kullanın veya odağı noktaya getirip ok tuşlarına basın. Daha büyük adımlar için Shift tuşunu basılı tutun.

Düzenleyici altı haneli HEX renkleri saklar. Renk seçiciyi kullanın veya önce RGB ya da HSL değerini HEX biçimine dönüştürün.

Hayır. Kopyalanan CSS, standart radyal gradyanları üst üste koyarak görünümü yaklaşık olarak üretir.

Geçerli sekmede sessionStorage içinden en fazla altı saat geri yüklenebilir. Sekme kapatıldığında genellikle daha erken silinir. Proje sunucularımıza gönderilmez ve huni URL’lerine eklenmez.

İlgili Araçlar

FPS Sayacı

requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.

İkiliden Sekizliye Dönüştürücü

Bitleri üçer üçer gruplayarak ikiliyi sekizliye dönüştürün. Unix izinleri, eski sistemler ve kompakt sayısal gösterim için yararlıdır.

Renk Paleti Jeneratörü

Temel bir HEX renginden monokromatik, analog, tamamlayıcı, triadik veya tetradik paletler oluşturun ve kopyalamaya hazır CSS değişkenleri alın.

HEX Renk Seçici

HEX rengi seçin veya girin; RGB, HSL, yaklaşık CMYK, bağıl parlaklık ve beyaz-siyah kontrast oranlarını görün.

Gradyan Duvar Kağıdı Oluşturucu

Dizüstü bilgisayar, telefon veya Zoom arka planları için bulanık üç renkli gradyan duvar kağıtları oluşturun. Açıyı ve bulanıklığı rastgele belirleyin ya da elle ayarlayın.

JSON Biçimlendirici

JSON metnini 2 veya 4 boşlukla okunabilir hale getirmek, kompakt çıktıya küçültmek ya da sonucu kopyalamadan önce söz dizimini hızlıca kontrol etmek için yapıştırın.