Nasıl kullanılır?
- 1Geçiş tipini seçin: doğrusal (linear), dairesel (radial) veya konik (conic).
- 2Açıyı ayarlayın; dairesel ve konik geçişlerde merkez noktasını, dairesel geçişte daire/elips şeklini seçin.
- 3Çubuğa tıklayarak renk durağı ekleyin, tutamaçları sürükleyerek taşıyın; her durağın rengini, konumunu ve opaklığını düzenleyin.
- 4Önizlemeyi kontrol edip CSS veya Tailwind kodunu kopyalayın; isterseniz hazır geçişlerden başlayın.
Doğrusal, dairesel ve konik geçiş
linear-gradient renkleri bir açı boyunca düz bir çizgide geçirir (0° aşağıdan yukarı, 90° soldan sağa, 135° sol üstten sağ alta). radial-gradient renkleri seçilen merkezden dışa doğru daire veya elips şeklinde yayar; buton parlamaları ve spot ışığı efektleri için uygundur. conic-gradient renkleri merkez etrafında döndürür; pasta grafikleri, renk çarkları ve dönen yükleme göstergeleri için kullanılır. Üç tip de tüm güncel tarayıcılarda desteklenir.
Renk durakları ve şeffaflık
Her renk durağının bir rengi, yüzde olarak konumu ve opaklığı vardır. İki durağı aynı konuma getirerek yumuşak geçiş yerine keskin çizgiler (şerit, bayrak deseni) oluşturabilirsiniz. Opaklık %100’ün altına indiğinde renk 8 haneli HEX (#RRGGBBAA) olarak yazılır; önizlemedeki dama deseni şeffaf bölgeleri gösterir. "Ters çevir" düğmesi tüm durakların sırasını tersine çevirir. En az iki durak bulunmalıdır.
CSS ve Tailwind çıktısı
CSS çıktısında önce ilk durağın rengiyle düz bir background satırı, ardından gradient satırı yer alır; gradient desteklemeyen ortamlarda (bazı e-posta istemcileri gibi) düz renk görünür. Tailwind çıktısı, boşlukları alt çizgiye çeviren arbitrary value biçimindedir (bg-[linear-gradient(135deg,#c6f04f_0%,#4fb3f0_100%)]) ve doğrudan class olarak kullanılabilir. 16 hazır geçiş, yeni bir tasarıma hızlı başlangıç sağlar.
Sık sorulan sorular
CSS’te gradient arka plan nasıl yapılır?
background: linear-gradient(135deg, #c6f04f 0%, #4fb3f0 100%); gibi bir satır yeterlidir. Araç bu kodu tasarımınıza göre otomatik üretir; kopyalayıp CSS dosyanıza yapıştırın.
Gradient’e şeffaflık nasıl eklenir?
Durağın opaklık değerini düşürün; renk #RRGGBBAA biçiminde yazılır. Bir görselin üzerine siyahtan şeffafa geçiş eklemek, üstteki yazının okunmasını kolaylaştırır.
Tailwind’de özel gradient nasıl kullanılır?
Araçtaki Tailwind çıktısını (bg-[linear-gradient(...)]) doğrudan class olarak ekleyin. Arbitrary value söz diziminde boşluklar alt çizgiyle yazılır; araç bunu otomatik yapar.
Metne gradient renk verebilir miyim?
Evet. Üretilen gradient’i background olarak verip background-clip: text ve color: transparent ekleyin. Araç yalnızca gradient değerini üretir, bu iki satırı kendiniz eklemelisiniz.
Sonuçlar iç açıcı değil mi?
Hızlı, SEO uyumlu web siteleri, e-ticaret ve Google Ads yönetimi için Webin Agency ekibiyle görüşün.