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

ASCII Tablosu Referansı

NUL, LF ve DEL dahil her kod için ondalık, onaltılık, sekizlik ve ikili değerlerle HTML sayısal karakter başvurusu gösterimini sunan tam ASCII tablosu.

HTML Karakter Referansı

HTML varlıklarının aranabilir listesi; adlandırılmış ve sayısal kodlarıyla birlikte özel karakter ve semboller için tek tıkla kopyalama.

Klavye kısayolları başvurusu

macOS, Windows ve Linux’ta VS Code, Chrome ve GNU Readline kullanan Bash için belgelenmiş varsayılan kısayolları arayın.

Dosya Boyutu Dönüştürücü

Bayt, KB, MB, GB, TB ve ikili IEC birimleri (KiB, MiB, GiB, TiB) arasında, ondalık ve ikiliyi dilediğiniz gibi birleştirerek dönüşüm yapın.

JSON Minifier

API yanıtlarında ve gömülü yapılandırmalarda payload boyutunu küçültmek için boşlukları, satır sonlarını ve yorumları kaldırarak JSON'u küçültün.

CSS Fiyat Tablosu Oluşturucu

HTML + CSS ile tek bir fiyat kartı oluşturun: paket adı, fiyat ve marka vurgu rengi. Kodu açılış sayfanıza kopyalayın.

Araç diğer dillerde mevcuttur