CSS Gradyan Oluşturucu
Önizlemeyle güzel CSS gradyanları oluşturun
Gradyan ayarları
Renk durakları
Renk durağı 1
Renk durağı 2
Hazır gradyanlar
Gradyan ipuçları
Yumuşak, yönlü renk geçişleri için doğrusal gradyanları kullanın.
Dairesel gradyanlar, spot ışığı veya odak efektleri oluşturmak için iyi çalışır.
Konik gradyanlar renk çarkları ve açısal desenler için çok uygundur.
Gradyanın renk dağılımını denetlemek için renk durağı konumlarını ayarlayın.
İnce gradyanlar için benzer tonlardaki renkleri, canlı efektler için zıt renkleri kullanın.
Canlı önizleme
CSS kısa yazımı
background: linear-gradient(to right, #3B82F6 0%, #8B5CF6 100%);CSS özelliği
background-image: linear-gradient(to right, #3B82F6 0%, #8B5CF6 100%);CSS sınıfı
.gradient-bg {
background: linear-gradient(to right, #3B82F6 0%, #8B5CF6 100%);
}Renkleri ve konumları ayarlayın. Önizleme siz çalıştıkça güncellenir.
CSS Gradyan Oluşturucu hakkında
Ücretsiz CSS Gradyan Oluşturucu aracımız, her web projesi için güzel ve pürüzsüz renk geçişleri oluşturmayı kolaylaştırır. Renkler, konumlar, yönler ve açılar üzerinde tam kontrolle doğrusal gradyanlar, radyal gradyanlar ve konik gradyanlar oluşturun; hepsini gerçek zamanlı görsel önizlemeyle izleyin.
İster hafif bir iki renkli arka plan ister karmaşık, çok duraklı bir gradyan gerekse de bu araç hassas konum kontrolüyle 10 adede kadar renk durağı sunar. Gün batımı, Okyanus, Orman ve Mor yağmur gibi hazır şablonlardan seçim yapın veya tasarımlarınız için benzersiz gradyan renk kombinasyonları keşfetmek üzere rastgele oluşturucuyu kullanın.
Oluşturucu, tek tıkla kopyalayabileceğiniz veya PNG görseli olarak indirebileceğiniz temiz CSS gradyan kodunu anında üretir. background kısa yazımı, background-image özelliği ve kullanıma hazır CSS sınıfı dâhil çeşitli çıktı biçimleri sunulur. Tüm işlemler tarayıcınızda çalışır; sunucuya yükleme gerekmez.
Temel özellikler
- Tam özelleştirmeyle doğrusal, radyal ve konik gradyan türleri desteği
- Hassas gradyan tasarımı için ayrı konum kontrolüyle 10 adede kadar renk durağı
- Doğrusal gradyanlar için 8 hazır yön ve özel açı girişi
- Radyal gradyan şekli (daire/elips) ve konum kontrolleri
- Renk çarkı efektleri için başlangıç açısı ayarlanabilen konik gradyan
- 4 yerleşik hazır gradyan: Gün batımı, Okyanus, Orman ve Mor yağmur
- Yaratıcı ilham ve keşif için rastgele gradyan oluşturucu
- Ayarları değiştirdiğinizde anında güncellenen gerçek zamanlı önizleme
- Birden fazla CSS çıktı biçimiyle tek tıkla kopyalama (kısa yazım, özellik, sınıf)
- Gradyanı yüksek çözünürlüklü PNG görseli olarak indirme (800x600)
CSS Gradyan Oluşturucu nasıl kullanılır?
- Gradyan türünü seçin: Gradyan stilinizi belirlemek için tür seçicisinden Doğrusal, Radyal veya Konik'i seçin.
- Yön veya konum belirleyin: Doğrusal gradyanlarda bir yön veya özel açı seçin. Radyal gradyanlarda şekil ve konum seçin. Konik gradyanlarda başlangıç açısını ayarlayın.
- Renkleri ekleyip ayarlayın: Gradyan renklerinizi renk seçicilerle belirleyin ve her rengin nerede göründüğünü kontrol etmek için konum değerlerini sürükleyin.
- Gerçek zamanlı önizleyin: Renkleri, konumları ve ayarları değiştirdiğinizde gradyan önizlemesinin anında güncellenmesini izleyin.
- CSS kodunu kopyalayın: CSS gradyan sözdizimini tercih ettiğiniz biçimde panonuza kopyalamak için Kopyala düğmesine tıklayın.
- Görsel olarak indirin: Gradyanınızı tasarım araçlarında veya sunumlarda kullanmak üzere PNG görseli olarak kaydetmek için İndir'e tıklayın.
Kullanım alanları
- Web sitesi arka planları: Pürüzsüz renk geçişleriyle dikkat çekici giriş bölümleri, üst bilgiler ve tam sayfa arka planları oluşturun.
- Düğme stili: Öne çıkan ve kullanıcıları eylem çağrılarına yönlendiren gradyan düğmeler tasarlayın.
- Kart ve bileşen vurguları: Arayüz kartlarına ve bileşenlerine gradyan kenarlıklar, kaplamalar veya vurgu renkleri ekleyin.
- Metin efektleri: Renkli gradyan metin efektleri oluşturmak için CSS gradyanlarını background-clip ile kullanın.
- Yükleme göstergeleri: İskelet ekranlar ve yükleme durumları için animasyonlu gradyan arka planlar oluşturun.
- Sosyal medya görselleri: Sosyal medya gönderileri, hikâyeler ve kapak fotoğrafları için gradyan görseller indirin.
- Tasarım sistemi renkleri: Markanızın tasarım dili için tutarlı gradyan belirteçleri oluşturun.
- Sunum slaytları: Web tabanlı sunumlar ve portfolyolar için gradyan arka planlar oluşturun.
Sıkça sorulan sorular
Bu araç ücretsiz mi?
Evet, CSS Gradyan Oluşturucu tamamen ücretsizdir. Kullanım sınırı, indirilen görsellerde filigran veya hesap oluşturma zorunluluğu yoktur.
Verilerim güvende mi?
Tüm gradyan oluşturma ve görsel çizimi işlemleri doğrudan tarayıcınızda gerçekleşir. Hiçbir sunucuya renk verisi, CSS kodu veya görsel yüklenmez; çalışmanız tamamen gizli kalır.
Doğrusal, radyal ve konik gradyanlar arasındaki fark nedir?
Doğrusal gradyanlar, renkleri belirli bir yönde düz bir çizgi boyunca değiştirir. Radyal gradyanlar, bir merkez noktasından dışa doğru dairesel veya eliptik biçimde yayılır. Konik gradyanlar, renk çarkı gibi bir merkez noktasının etrafında renkleri döndürür.
Bir gradyanda kaç renk kullanabilirim?
Tek bir gradyanda 2 ila 10 renk durağı kullanabilirsiniz. Geçiş üzerinde hassas kontrol için her durağın kendi renk seçicisi ve konum kaydırıcısı vardır.
CSS gradyanları tüm tarayıcılarda destekleniyor mu?
Doğrusal ve radyal gradyanlar tüm modern tarayıcılarda desteklenir. Konik gradyanlar da Chrome, Firefox, Safari ve Edge'in güncel sürümlerinde yaygın olarak desteklenir.
İpuçları ve en iyi uygulamalar
- Hafif efektler için benzer tonlar kullanın: Renk çarkında birbirine yakın renkler, doğal hissettiren pürüzsüz ve zarif gradyanlar oluşturur.
- Renk duraklarını sınırlayın: İki ila üç renk genellikle en temiz sonuçları verir. Daha fazla durak, dikkatli konumlandırılmazsa bulanık geçişlere neden olabilir.
- Yedek renk belirleyin: Gradyanı görüntüleyemeyebilecek tarayıcılar için gradyan bildiriminizden önce her zaman düz bir background-color ekleyin.
- Spot ışığı efektleri için radyali deneyin: Radyal gradyanlar, bir bölümün merkezine dikkat çekmek veya bir odak alanını vurgulamak için uygundur.
- Birden fazla ekranda test edin: Gradyanlar farklı monitörlerde ve mobil ekranlarda farklı görünebilir; bu nedenle her zaman çeşitli cihazlarda önizleyin.
- Rastgele oluşturucuyu kullanın: Daha önce düşünmediğiniz beklenmedik renk kombinasyonlarını keşfetmek için Rastgele'ye tıklayın.