🌈 Mesh Gradient Generator

Tam Rehber: Mesh Gradient Üreteci

Mesh Gradient Nedir?

Mesh gradient (örgü gradyanı), renk geçişlerinin tuval üzerinde dağılmış birden fazla bağımsız kontrol noktasından yayıldığı bir gradyan türüdür. Doğrusal gradyanlarda olduğu gibi tek bir yönde akmaz, radyal gradyanlarda olduğu gibi tek bir merkezden genişlemez. Her kontrol noktasının kendine ait rengi vardır ve renkler aynı anda tüm komşu noktalar arasında organik biçimde karışır. Sonuç, canlı, boyutlu ve standart CSS linear-gradient() ya da radial-gradient() sözdizimi kullanılarak tek başına elde edilmesi imkânsız olan karmaşık, çok yönlü bir renk alanıdır.

Görsel etki, suya birkaç mürekkep damlası damlatıldığında oluşana benzer: her damla yayılır ve diğerleriyle birleşir; sert kenarı, tek ekseni ve belirgin merkezi olmayan pürüzsüz geçişler oluşturur. Bu, mesh gradyanları modern UI tasarımı için bu kadar çekici kılan şeydir; geometrik ve mekanik değil, doğal ve organik hissettirirler.

Mesh gradyanlar 2020 civarında tasarım yazılımlarında (Figma, Adobe Illustrator, Sketch) ana akıma girdi; ardından Apple'ın iOS 16 duvar kağıtları ve ürün açılış sayfaları, uygulama açılış ekranları ve marka kimliği materyallerindeki geniş "bulanık gradyan" trendiyle popülerlik patlaması yaşadı. CSS, gerçek bir mesh gradyanı doğal olarak üretemez; ancak katmanlı radyal gradyanlar — her biri şeffaf bir düşüşle — efekti çoğu üretim kullanım senaryosu için yeterince yakın biçimde taklit edebilir.

Mesh Gradient Üreteci Nasıl Kullanılır?

Bir önayar ile başlayın. Üretici, profesyonelce hazırlanmış 12 önayarla birlikte gelir: aurora (kuzey ışıkları yeşilleri ve morları), sunset (sıcak turuncular ve pembeler), ocean (derin maviler ve camgöbeği), forest (toprak yeşilleri ve kahverengileri), lavender (soft morlar ve beyazlar), fire (kırmızılar, turuncular, sarılar), candy (parlak pembeler ve maviler), midnight (derin maviler ve siyaha yakın tonlar), desert (sıcak toprak kırmızıları ve altınlar), nordic (serin griler ve buz mavisi), neon (elektrik yeşilleri ve macenta), pastel (yumuşak çok renkli karışım). Herhangi bir önayara tıklamak, renk noktası yapılandırmasını anında tuvale yükler.

Renk noktalarını sürükleyin. Tuvaldeki her renkli daire bir kontrol noktasıdır. Herhangi bir noktayı tıklayıp yeni bir konuma sürükleyin. Sürükleme sırasında gradyan gerçek zamanlı olarak yeniden akar. Bir noktayı tuvalin merkezine doğru taşımak rengini daha baskın kılar; köşeye itmek onu bir aksana dönüştürür.

Tek tek noktaları yeniden renklendirin. Herhangi bir renk noktasına tıklayarak (sürüklemeden) renk seçiciyi açın. Renk tekerleğinden herhangi bir renk seçin veya doğrudan bir hex değeri girin. Tuval anında güncellenir. Bu, bir önayar paletini belirli bir markaya uyarlamanın yoludur.

Nokta ekleyin ve kaldırın. Tuvalin merkezine yeni bir kontrol noktası eklemek için Nokta Ekle düğmesini kullanın, ardından istediğiniz konuma sürükleyin ve bir renk atayın. Bir noktayı kaldırmak için seçip Noktayı Kaldır düğmesini kullanın. Karmaşıklık ile kontrol edilebilirlik arasındaki tatlı nokta 4–8 noktadır.

Gradyanınızı dışa aktarın. Üç dışa aktarma seçeneği mevcuttur: CSS (radyal-gradyan CSS kodunu panonuza kopyalar), PNG (yüksek çözünürlüklü bir raster görüntü indirir) ve SVG (SVG filtre temelleri kullanan bir vektör dosyası indirir).

CSS Dışa Aktarma: Radyal Gradyan Katmanlaması Nasıl Çalışır?

CSS'nin yerel bir mesh gradyan özelliği yoktur. Dışa aktarılan CSS, her biri ilgili renk noktasının tuval koordinatlarına konumlandırılmış birden fazla radial-gradient() katmanını üst üste koyarak mesh etkisini yaklaşık olarak üretir; virgülle ayrılmış gradyan katmanlarıyla background kısaltmasını kullanır.

Her katman, gradyan kaynağını konumlandırmak için circle at X% Y% sözdizimini kullanır, ardından kontrol noktasının renginden (tam opaklıkla) transparent'a geçiş yapar. Şeffaflık aracılığıyla ekran benzeri karıştırma nedeniyle renkler tarayıcıda görsel olarak karışır ve mesh efektini üretir. Sonuçta elde edilen CSS kopyalanıp yapıştırmaya hazırdır ve tüm modern tarayıcılarda önek gerektirmeden çalışır.

Bir uyarı: CSS yaklaştırması, oluşturma sırasında kullanılan aynı tuval en boy oranında görüntülendiğinde en iyi görünür. Piksel mükemmeliyetinde yeniden üretim için PNG veya SVG dışa aktarmayı kullanın.

PNG - SVG Dışa Aktarma: Hangisi Ne Zaman?

PNG dışa aktarma tam tuval çözünürlüğünde bir raster görüntü üretir. Şu durumlarda PNG kullanın: gradyana yerel bir mobil uygulamada (iOS, Android) arka plan resmi olarak ihtiyaç duyduğunuzda; Figma, Sketch veya Photoshop'ta katman olarak kullanmak için dışa aktarırken; gradyanı bir PDF veya Word belgesine gömmeniz gerektiğinde; veya tüm tarayıcılarda özdeş görüntüleyen bir arka plan resim dosyası istediğinizde. PNG en uyumlu formattır. Dezavantajı sabit çözünürlüktür — görüntüyü önemli ölçüde büyütürseniz pikselleşir.

SVG dışa aktarma, mesh efektini çoğaltmak için SVG feBlend, feFlood ve feComposite filtre temelleri kullanan bir vektör dosyası üretir. SVG çözünürlükten bağımsızdır; kalite kaybı olmadan her boyuta ölçeklenir. Şu durumlarda SVG kullanın: gradyanı sonsuz ölçeklenebilirlik isteyerek bir web sayfasına arka plan olarak gömüyorsanız; vektör sanatına ihtiyaç duyan bir baskı tasarımcısına varlık sağlıyorsanız. SVG filtre temelleri aracılığıyla oluşturulan mesh gradyanların bazı tarayıcılarda tuval önizlemesinden biraz farklı görünebileceğini unutmayın.

Tasarım İpuçları: En İyi Sonuçları Elde Etmek

4–8 nokta tatlı noktadır. Dörtten az nokta, standart CSS ile daha basit biçimde elde edilebilecek bir gradyan üretir. Sekizden fazla nokta, birbiriyle çakışan renklerle kontrolü zorlaştırır. Kanıtlanmış bir nokta sayısı kullanan bir önayarla başlayın ve yalnızca belirli bir bölgede belirli bir renge ihtiyaç duyarsanız nokta ekleyin.

Tamamlayıcı veya analoj renkler kullanın. Tamamlayıcı renkler (renk çarkında zıt, mavi ve turuncu gibi) CTA'lar, afişler ve dikkat çekici arka planlar için uygun enerjik, yüksek kontrastlı gradyanlar oluşturur. Analoj renkler (çarkta komşu, mavi, deniz mavisi ve camgöbeği gibi) içeriğin arkasında geri çekilmesi gereken arka planlar için daha uygun uyumlu, rahatlatıcı gradyanlar oluşturur.

Nokta konumlarını kasıtlı olarak değiştirin. Tüm noktaları ızgara düzenine yerleştirmekten kaçının — bu öngörülebilir döşenmiş bir görünüm oluşturur. Bunun yerine bazı noktaları birbirine yakın kümelendirin (baskın bir renk bölgesi için) ve diğerlerini kenarlara yayın (ince renklendirme için). Asimetri daha doğal ve canlı hissettirirler.

İçeriğinize karşı test edin. Tek başına güzel görünen bir gradyan, üzerine yerleştirilen metin veya UI öğeleriyle zayıf kontrast oluşturabilir. Kesinleştirmeden önce, metin veya kart içeriğinizi gradyan önizlemesinin üzerine yerleştirerek okunabilirliği kontrol edin.

Kullanım Senaryoları

Hero arka planlar: Açılış sayfası hero bölümlerinde tam genişlikte gradyan arka planlar en yaygın kullanım senaryosudur. Bir mesh gradyan, başlık ve CTA'yı dikkat dağıtmadan hero'ya görsel derinlik kazandırır.

Kart ve panel arka planlar: Gradyanı bir kart bileşenine background olarak uygulayarak çevredeki beyaz alandan öne çıkarın. Özellikle fiyatlandırma kartları, özellik vurgulama kartları ve referans bölümleri için işe yarar.

Uygulama UI'ı: Mobil ve web uygulaması katılım ekranları, açılış ekranları ve sekme çubuğu arka planları mesh gradyanlardan büyük ölçüde yararlanır. Ağır görsel varlıklar gerektirmeden görsel parlaklık iletirler.

Masaüstü ve mobil duvar kağıtları: Yüksek çözünürlüklü PNG olarak dışa aktarın ve cihaz duvar kağıdı olarak kullanın. Organik renk geçişleri OLED ekranlarda muhteşem görünür.

Teknik Notlar: Ekran Karıştırma Modu ve Tarayıcı Uyumluluğu

Tuval oluşturma, renk noktası katkılarını karıştırmak için dahili olarak ekran karıştırma modunu kullanır. Ekran karıştırma (çarpmanın tersi) her zaman girdi renklerine eşit veya daha parlak renkler üretir; bu nedenle mesh gradyanlar koyu, çamurlu paletler yerine parlak, havadar paletlere eğilim gösterir. Daha koyu, daha kasvetli bir gradyan istiyorsanız daha derin temel renklerle başlayın.

CSS dışa aktarma, Chrome 10+, Firefox 3.6+, Safari 5.1+ ve tüm modern Edge sürümlerinde desteklenen standart özellikleri kullanır. Polyfill gerekmez. SVG dışa aktarma eşdeğer geniş desteğe sahip SVG 1.1 filtre temellerini kullanır.

Sıkça Sorulan Sorular

Mesh gradient tam olarak nedir? Renk geçişlerinin birden fazla bağımsız noktadan organik biçimde yayıldığı ve birleştiği bir gradyan türüdür — tek ekseni veya merkezi olan doğrusal ya da radyal gradyanların aksine.

Dışa aktarılan CSS'yi doğrudan projemde kullanabilir miyim? Evet. Dışa aktarılan CSS üretime hazırdır. Herhangi bir öğenin background özelliğine yapıştırın.

Kaç renk noktası kullanmalıyım? 4–8 önerilir. Daha fazla nokta daha fazla renk karmaşıklığı sağlar ancak yönetimi zorlaşır.

SVG dışa aktarma tamamen doğru mu? Yakın bir yaklaşımdır. SVG filtre tabanlı oluşturma, bazı tarayıcılarda tuval önizlemesinden biraz farklı görünebilir. Piksel mükemmeliyeti için PNG dışa aktarmayı kullanın.

Bu çevrimdışı çalışıyor mu? Evet. Üretici tamamen tarayıcı tabanlıdır ve sayfa yüklendikten sonra internet bağlantısı gerektirmez.

Daha basit gradyan ihtiyaçları için Gradyan Üreteci'ne bakın. Noktalarınız için renk seçmek amacıyla Renk Seçici'yi kullanın. Eşleşen renklerle kutu gölgesi tasarımı için Kutu Gölgesi Üreteci'ni deneyin. Mesh gradyanların üzerine iyi oturan cam morfolizm UI öğeleri için CSS Glassmorphism Üreteci'ne bakın.