Gradyan Oluşturucu

2-5 renk ve özel açılarla doğrusal, dairesel ve konik geçişler oluşturun. Canlı önizleme, hazır ayarlar, rastgele (Boşluk), Tailwind ve CSS çıktısı, PNG indirme. Karıştırmak için Boşluk tuşuna basın.

veya Boşluk

Yön ve şekil

Açı 135°

Renk durakları (2)

CSS çıktısı

Gradyan oluşturucu nedir?

Pürüzsüz renk geçişleri, sıfır görsel

Gradyan iki veya daha fazla rengi çizgi boyunca, merkezden veya nokta etrafında harmanlar. Tarayıcılar onu keskin, çözünürlükten bağımsız CSS olarak işler, sıfır ağ isteğiyle ana görseller, düğmeler, kartlar ve kaplamalar için mükemmeldir.

Bu araç 2 renkli temellerin ötesine geçer: doğrusal, dairesel ve konik türler, konumlu 5 durağa kadar, 8 hazır ayar, rastgele ilham, Tailwind keyfi sınıflar ve PNG dışa aktarımı.

Nasıl kullanılır

Tür ve renkleri seçin

Doğrusal, dairesel veya konik. Her durağı seçici, HEX veya 0-%100 kaydırıcıyla düzenleyin. 5 durağa kadar ekleyin, 2 durağa kadar indirin.

Yönü ayarlayın

Doğrusal/konik için açı kaydırıcısı ve 45° hazır ayarları, dairesel için şekil ve konum. Hazır ayarları deneyin veya rastgele için Boşluk tuşuna basın.

Kopyalayın ve yayınlayın

CSS veya Tailwind kopyalayın, CSS ve PNG indirin veya URL paylaşın, duraklar ve açı ?type=&angle=&stops= içinde saklanır.

Gerçek hayattan örnekler

Ana arka planlar: 135deg lacivert ve pembe

Çapraz 2 renkli zeminler beyaz metin altında okunaklı kalır ve tek CSS satırına sığar. Indigo Pink hazır ayarından başlayın.

Düğmeler ve CTA: 90deg 3 durak

Gün batımı tarzı üçlüler küçük öğelere derinlik katar. Fareyle üzerine gelme durumlarında dengeli karışım için orta durağı %50 yakınında tutun.

Parlamalar ve spotlar: dairesel

Üstte dairesel elips kartların arkasında yumuşak kutup ışığı yaratır. Kontrast güvenli kaplamalar için koyu yüzeylerle eşleştirin.

İlerleme halkaları: konik

Açıdan konik süpürmeler pasta grafiklere ve yükleyicilere uyar. Sert konumlu iki durak parçalı halkalar verir.

Tailwind ile yayınlama

Keyfi bg-[linear-gradient(...)] sınıfını doğrudan koda kopyalayın veya tekrar kullanım için yapılandırma parçacığını kaydedin.

Sosyal ve OG görselleri

Tasarım aracı açmadan kapaklar, küçük resimler ve yer tutucular için 1200x630 PNG anlık görüntüleri indirin.

Animasyonlu geçişler ve gradyan metin

Her çıktıyı yeniden kullanın: ışıltılı arka planlar için arka plan konumunu canlandırın veya gradyan başlıklar için background-clip:text ile eşleştirin. CSS kodunu kopyalayıp iki kare ekleyin.

Sık sorulan sorular

1CSS gradyanı nasıl yapılır?

Tür seçin, konumlu 2-5 renk ayarlayın, açı ve merkezi düzenleyip background: satırını kopyalayın. En kolay yol: hazır ayar seçin, bir durağı değiştirin, CSS kopyala düğmesine basın.

2Doğrusal, dairesel ve konik ne zaman kullanılır?

Açı boyunca ana görseller ve düğmeler için doğrusal. Noktadan yayılan parlamalar için dairesel (spotlar, kutup ışığı). Pasta grafik, yükleyici ve renk tekerleği gibi merkez etrafı süpürmeler için konik.

3“Sağa doğru” ile “90deg” arasındaki fark nedir?

Anahtar sözcükler kutu şekline göre köşeden köşeye gider. Açılar tam pusula yönleridir (0° yukarı, 90° sağa, saat yönünde). Her en boy oranında aynı görünmesi için derece çıktısı veriyoruz.

4Duraklar ve konumlar nasıl çalışır? Çizgi yapabilir miyim?

Her durak renk ve 0-%100 değeridir. Pürüzsüz karışımlar için eşit aralayın. Sert çizgi kenarı için iki durağı aynı konuma yığın. 5 durağa kadar ekleyin, 2 durağa kadar indirin.

5Tailwind, PNG ve paylaşım bağlantısı var mı?

Evet, her gradyan CSS ve Tailwind keyfi bg-[...] gösterir. İndirme penceresi CSS, Tailwind veya 1200x630 PNG sunar. URL tür, açı ve durakları saklar.

6Tüm tarayıcılarda çalışır mı? Çalışmam yükleniyor mu?

Doğrusal, dairesel ve konik 2015ten beri modern tarayıcılarda temeldir. Sonsuza dek ücretsiz, kayıt yok ve tarayıcınızdan hiçbir şey çıkmaz.

Palet Oluşturucu

Rastgele uyumlar + görsel modu

Renk Dönüştürücü

HEX RGB HSL HSV CMYK LAB

Kontrast Denetleyici

WCAG metin okunabilirlik puanları

Görsel Palet Oluşturucu

Herhangi bir fotoğraftan palet çıkar