Ücretsiz CSS Gradyan Oluşturucu

Bu ücretsiz CSS gradyan oluşturucu ile gradyan arka plan oluşturun. Doğrusal, radyal veya konik türü seçin, açıyı ve renk duraklarını ayarlayın, önizlemeyi izleyin ve hazır CSS'in tek satırını kopyalayın.

Açı:°

Renk durakları

100%

CSS çıktısı

background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);

CSS gradyanı nasıl oluşturulur

Bir gradyan türü seçin.

Doğrusal, Radyal veya Konik seçeneğini belirleyin. Doğrusal ve konik için açıyı kaydırıcıyla ayarlayın veya soldan sağa için 90 gibi bir sayı yazın.

Renk duraklarını ayarlayın.

Her rengi seçiciyle belirleyin veya bir kod yazın, kaydırıcısını sürükleyerek yerleştirin ve daha fazla renk için Durak ekle düğmesini kullanın.

CSS'i kopyalayın.

Önizleme ve kod her düzenlemeyle değişir. CSS'i kopyala düğmesine tıklayın ve background satırını stil dosyanıza veya satır içi bir stile yapıştırın.

Sıkça sorulan sorular

Açılar, duraklar, saydamlık, tarayıcı desteği ve kodun kullanımı hakkında yanıtlar.

CSS'te gradyan nasıl yapılır?

Arka plan olarak bir gradyan işlevi kullanın, örneğin background: linear-gradient(90deg, #ff6b6b 0%, #feca57 100%). Burada türü, açıyı ve durakları siz seçersiniz; araç da stil dosyanıza kopyalamanız için bu satırı yazar.

Doğrusal gradyanda hangi açı soldan sağa gider?

90deg soldan sağa gider. 0deg alttan üste, 180deg yukarıdan aşağıya ve 270deg sağdan sola gider. Buradaki varsayılan, sol üstten sağ alta doğru olan 135deg'dir. Negatif değerler dahil istediğiniz sayıyı yazabilirsiniz.

Gradyanı saydamlığa nasıl soldurabilirim?

Bir durağın metin kutusuna saydam bir renk yazın; örneğin şeffaf beyaza geçiş için rgba(255,255,255,0) veya şeffaf siyah için rgba(0,0,0,0). Kod bunu yazdığınız gibi korur. Renk seçici saydamlığı gösteremez ve onun yerine siyah gösterir.

Doğrusal, radyal ve konik gradyanlar arasındaki fark nedir?

Doğrusal, renkleri bir açıyla düz bir çizgi boyunca karıştırır. Radyal, onları bir merkez noktasından dışarı doğru yayar. Konik ise onları bir merkez etrafında akrep gibi tarar; bu da pasta grafikleri ve renk çarkları için uygundur. Bu araç radyal gradyanları ortalanmış bir daire olarak çizer.

Radyal gradyanın şeklini veya konumunu değiştirebilir miyim?

Araçta henüz değil, çünkü radyal çıktı her zaman merkezden radial-gradient(circle, ...) şeklindedir. Kopyaladıktan sonra kodu düzenleyin: circle yerine ellipse yazın veya merkezi taşımak için circle at 30% 20% yazın. Duraklar aynı kalır.

CSS gradyanları için -webkit- ön ekine gerek var mı?

Hayır. Güncel tüm tarayıcılar doğrusal ve radyal gradyanları ön ek olmadan destekler; konik gradyanlar ise Chrome 69, Safari 12.1, Firefox 83 ve sonraki sürümlerde çalışır. Bu araç hiçbir zaman ön ek eklemez, bu yüzden kopyalanan satır yalnızca standart sözdizimidir.

Sert renk durakları veya çizgiler nasıl yapılır?

İki durağı aynı konuma koyun. Örneğin %50'de #000000 ve %50'de #ffffff, geçiş yerine keskin bir çizgi oluşturur. Çizgili desen için daha fazla çift ekleyin. Kod, durakları konuma göre sıralar; aynı noktadaki duraklar ise eklediğiniz sırayı korur.

Kaç renk durağı ekleyebilirim?

Sınır yok. Durak ekle düğmesi, yeni bir durağı ilk durak ile en son eklenen durağın tam ortasına yerleştirir; bu yüzden her yeni durağı istediğiniz yere sürükleyin. İki durak kalana kadar durakları silebilirsiniz.

Gradyanı Tailwind CSS içinde kullanabilir miyim?

Araç Tailwind sınıfları değil, düz CSS üretir. Gradyanı boşluklar yerine alt çizgi kullanarak isteğe bağlı bir değer olarak yapıştırın, örneğin bg-[linear-gradient(135deg,#6366f1_0%,#8b5cf6_100%)], ya da temanıza arka plan görseli olarak ekleyin.

CSS ile gradyanlı metin nasıl yapılır?

Bu araç arka plan gradyanları üretir, ancak kodu metin için de kullanabilirsiniz. Kopyaladığınız background satırını metin öğesine ekleyin, ardından gradyanın harflerin içinden görünmesi için background-clip: text, -webkit-background-clip: text ve color: transparent ekleyin.

CSS gradyan oluşturucu ücretsiz ve gizli mi?

Evet. Hesap veya kullanım sınırı olmadan ücretsizdir. Renkleriniz ve ayarlarınız tarayıcınızda kalır ve kaydedilmez, bu yüzden sayfayı yenilediğinizde her şey sıfırlanır. Canlı sitede Google Analytics yalnızca CSS'i kopyala tıklamalarını sayar, gradyanın kendisini asla görmez.

CSS gradyan oluşturucu: türler, duraklar ve kod

Üç gradyan türü, istediğiniz sayıda renk durağı, açı kontrolü, canlı önizleme ve kopyalayabileceğiniz tek satırlık CSS.

CSS gradyan oluşturucu türleri: 135deg doğrusal, dairesel radyal ve 135deg'den başlayan konik, #6366f1'den #f59e0b'ye ve #ec4899'a

Doğrusal, radyal ve konik gradyanlar oluşturun

Üç gradyan türü arasında geçiş yapın. Doğrusal ve konik türler, kaydırıcıyla ayarlanan veya elle yazılan 0 ile 360 derece arası bir açı kullanır. Radyal ise her zaman merkezden bir daire çizer.

Doğrusal, radyal ve konik türler
0 ile 360 derece arası açı
Radyal, ortalanmış bir dairedir

Hemen deneyin

CSS gradyan oluşturucu renk durakları: %0'da #6366f1, %100'de #ec4899 ve %50'de #f59e0b, her birinin kaydırıcısı ile

Gradyan renk duraklarını ekleyin ve taşıyın

İki durakla başlayın ve ihtiyacınız kadar ekleyin. Her durağın bir renk seçicisi, bir hex kutusu ve onu %0 ile %100 arasında istediğiniz yere yerleştiren bir kaydırıcısı vardır.

Renk durağı sayısında sınır yok
%0 ile %100 arası konumlar
Duraklar ikiye kadar silinebilir

Hemen deneyin

Yapıştırmaya hazır CSS'i kopyalayın

CSS'i kopyala, duraklar konuma göre sıralanmış tek bir satır verir, örneğin background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); gibi. Güncel tarayıcılar gerek duymadığı için satıcı ön eki eklenmez.

Herhangi bir CSS rengini kullanın

Her durağın yanındaki metin kutusu yalnızca hex değil, her CSS rengini kabul eder. rgba(0,0,0,0), transparent, bir hsl() değeri veya renk adı yazın; koda yazdığınız gibi girer.

Başlangıç noktası için rastgele oluşturun

Rastgele, altı iki renkli çiftten birini ve rastgele bir açı seçer. Mevcut tüm durakların yerine geçer, bu yüzden ince ayardan sonra değil, önce kullanın.

Ücretsiz, hesap gerekmez

Kaydolmadan istediğiniz kadar gradyan oluşturun. Renkler ve ayarlar tarayıcınızda kalır ve sayfayı yenilediğinizde sıfırlanır. Canlı sitede Google Analytics yalnızca CSS'i kopyala tıklamalarını sayar, kodu asla görmez.

CSS gradyan kullanım alanları

Bir CSS gradyan satırını yapıştırabileceğiniz yaygın yerler.

Hero arka planları

Bir açılış sayfasının hero alanını veya bölümünü iki ya da üç renkli bir gradyanla doldurun. Açık tarafın başlığınızın arkasında kalması için açıyı ayarlayın, ardından background satırını kopyalayın.

Tam genişlikte hero ve bölüm banner arka planları
Tek noktada iki duraklı keskin kenarlı bölüm ayırıcılar
Görsel katmanları için rgba ile yazılmış saydamlığa geçişler

Düğme ve kart stilleri

Düğmelere, kartlara ve rozetlere hafif bir dolgu verin. Marka renginizin birbirine yakın iki tonunu seçin, açıyı 135 derece civarında tutun ve satırı bileşen stiline yapıştırın.

Birbirine yakın iki marka tonundan birincil düğme dolguları
Kısa doğrusal geçişli kart başlığı vurguları
Konik gradyanla pasta grafiği tarzı dolgular

Marka tasarımı

Marka renklerini logolar, uygulama simgeleri ve sosyal medya grafikleri için gradyana dönüştürün. CSS'in paletinizle tam olarak eşleşmesi için her marka hex kodunu bir durağa yazın.