Gradient Oluşturucu

İki veya daha fazla renk seçin, gradyanı zevkinize göre sürükleyin, CSS'yi kopyalayın. Veya duvar kağıdı, slayt arka planı ya da sosyal medya gönderisi arka planı olarak kullanmak üzere PNG olarak indirin. Lineer, radyal ve konik gradyanların yanı sıra, modern arayüzlerde gördüğünüz yumuşak Apple tarzı arka planlar için bir mesh-gradyan modu da desteklenir.

Gradyan türleri açıklaması

• Lineer: A renginden B rengine düz çizgi. Yön seçici (yukarıdan aşağıya, çapraz vb.).
• Radyal: eşmerkezli — merkezde A rengi, kenarlara doğru B rengine geçiş. Spot ışığı efektleri için kullanışlıdır.
• Konik: bir renk çarkı gibi merkez nokta etrafında döner. Modern UI tasarımında trend.
• Mesh (premium): birden çok renk lekesinin yumuşak bir şekilde harmanlanması. "Apple gradyanı" görünümü.

Kopyalayabilecekleriniz

1. CSS: yapıştırmaya hazır linear-gradient(...) veya background-image: bildirimi.
2. Tailwind: en yakın bg-gradient-* sınıfı ve özel renk eklemeleri.
3. SVG: simgelerde veya UI grafiklerinde ölçeklenebilir kullanım için.
4. PNG indirme: telefon duvar kağıdı (1284×2778), masaüstü (3840×2160) ve kare (1080×1080) dahil her boyut.

Yaygın kullanım alanları

• Telefon duvar kağıtları: mesh gradyanlar iOS'ta çok popüler. Test etmek için iPhone Duvar Kağıdı Önizleme aracımızı deneyin.
• Sosyal medya gönderisi arka planları: alıntı grafikleri için anında markaya uygun görünüm.
• Hero bölümleri: açılış sayfalarında gradyan arka planlar her yerde.
• Slayt sunumları: sıkıcı düz arka planları değiştirin.

İşe yarayan renkleri seçme

Renk çarkında bitişik olanlar = ince, uyumlu. Zıt olanlar = cesur, dikkat çekici. Geniş bir boşluğu köprülemek için üçüncü bir orta durak ekleyin. Markaya sadık gradyanlar için marka HEX'inizi yapıştırın ve ikinci durak için bir ton veya gölge seçin. Tonları (daha yüksek açıklığa sahip HSL) veya gölgeleri (daha düşük) bulmak için Renk Dönüştürücü aracımızı kullanın.