CSS Gradient
Generator
Sezgisel bir arayüzle güzel CSS gradyanları ve desen arka planları oluşturun. Ücretsiz, güvenli, tarayıcınızda çalışır.
Rengi Düzenle
Oluşturulan CSS Kodu
Oluşturulan CSS Kodu
Bunu da beğenebilirsiniz
CSS Gradyan Oluşturucu Hakkında
CSS Gradyan Oluşturucu, geliştiriciler ve tasarımcılar için JavaScript veya resim dosyaları kullanmadan yalnızca CSS ile güzel gradyanlar ve desen arka planları tasarlamaya yarayan ücretsiz bir araçtır. Sezgisel bir kullanıcı arayüzü sayesinde doğrusal, radyal ve konik gradyanlar oluşturup CSS kodunu projelerinizde kullanabilirsiniz.
Karmaşık renk durakları ve alfa saydamlık ayarlarını kaydırıcılar ile kolayca yapabilirsiniz. Ayrıca önceden tasarlanmış 24 ön ayar ve 12 tür CSS desen oluşturucu ile tarayıcınızın içinde tasarımdan uygulamaya anında geçiş yapabilirsiniz.
Nasıl Kullanılır
Tür Seçimi ve Temel Ayarlar
'Gradyan' sekmesini açın ve stilinizi (doğrusal, radyal veya konik) seçin. Doğrusal için açıyı ayarlayın; radyal için merkezin ve ışığın nasıl yayılacağını şekil ve merkez ayarlarıyla belirleyin.
Renk Durakları Ekle ve Düzenle
Yeni bir renk durağı eklemek için gradyan çubuğunun üzerine tıklayın. Geçişi ayarlamak için renk iğnelerini yatay sürükleyin ve renk seçici ile (HEX veya HSLA) rengi ve saydamlığı ince ayarlayın.
Önizleme ve Kodu Kopyala
Sonuçları önizleme alanında gerçek zamanlı kontrol edebilirsiniz. Görünümü tam boyutta test etmek için sağ üstteki 'Tam Ekran' butonunu kullanın ve ardından 'CSS Kopyala' ile kodu panoya kopyalayıp stil dosyanıza yapıştırın.
Glossary
- CSS Gradyanı
- İki veya daha fazla rengin pürüzsüzce geçiş yaptığı arka planlar oluşturmak için linear-gradient() gibi işlevleri kullanan bir tekniktir. Resim kullanmadığı için sayfa yükleme hızını artırır.
- Renk Durağı
- Gradyanda belirli bir rengin olduğu (0% ile 100% arası) bir konumu ifade eder. Birçok renk durağını birbirine çok yakın koyarsanız keskin sınırlar ve çizgiler elde edebilirsiniz.
- Doğrusal Gradyan (linear-gradient)
- Renklerin belirli bir açıya (ör. 135deg) veya yöne (ör. to right) doğru çizgisel olarak değiştiği en yaygın gradyan türüdür.
- Radyal Gradyan (radial-gradient)
- Renklerin belirtilen bir merkezden dışarıya doğru daire veya elips şeklinde yayıldığı gradyan türüdür.
- Konik Gradyan (conic-gradient)
- Renklerin bir merkez etrafında saat yönünde döndüğü gradyan türüdür. CSS ile yuvarlak grafikler (pasta grafik) oluşturmak için çok uygundur.
- HSLA Rengi
- Renkleri dört değerle belirtme yöntemidir: Ton, Doygunluk, Parlaklık ve Alfa. Bir rengi 'biraz daha koyu' yapmak gibi sezgisel ayarlamalar için çok kullanışlıdır.
Sıkça Sorulan Sorular
- Q.Oluşturulan kodu ticari bir projede kullanabilir miyim?
- Evet, ticari kullanım için tamamen ücretsizdir. Bu araç tarafından üretilen CSS kodunun hiçbir telif hakkı kısıtlaması yoktur, herkes dilediği gibi kullanabilir.
- Q.Bu aracı akıllı telefonlarda kullanabilir miyim?
- Evet, arayüz tamamen duyarlıdır ve sürükle-bırak gibi renk ayarları dokunmatik cihazlar için optimize edilmiştir.
- Q.Gradyan IE gibi eski tarayıcılarda görüntülenmiyor.
- IE11 dahil eski tarayıcılar (özellikle conic-gradient gibi) modern CSS işlevlerini desteklemeyebilir. Gerekirse CSS dosyanıza geri dönüş(fallback) olarak bir background-color eklemenizi öneririz.
- Q.Oluşturulan desen arka planının boyutunu nasıl değiştirebilirim?
- Desen sekmesindeki 'Boyut' kaydırıcısını kullanarak tekrar ölçeğini ayarlayabilirsiniz. Bu işlem oluşturulan CSS'deki background-size özelliğini otomatik günceller.
- Q.Gradyanı resim dosyası olarak kaydetmek mümkün mü?
- Bu araç yalnızca CSS kodu üretmek için tasarlandığından PNG veya JPG dışa aktarma işlevi yoktur. Ancak tam ekran önizleme modunu açıp ekran görüntüsü (screenshot) alabilirsiniz.
Kullanım Durumları
Hero Bölümü Tasarımı
Bir web sitesinin ilk görünümüne (hero) pastel veya gün batımı gradyanları uygulamak, kullanıcılarda güçlü ve sürükleyici bir izlenim bırakabilir.
Glassmorphism Uygulaması
Alfa saydamlığı düşürülmüş bir gradyan arka plan ayarlayıp bunu backdrop-filter: blur() ile birleştirerek modern buzlu cam (frosted-glass) arayüzler oluşturabilirsiniz.
Hafif Arka Plan Desenleri
Sadece CSS kullanarak nokta veya çizgi desenleri oluşturmak, sitenizin PageSpeed hızını düşürmeden zengin bir tasarım elde etmenizi sağlar.
Veri Görselleştirme
Konik gradyanlar, karmaşık JavaScript kütüphanelerine ihtiyaç duymadan sadece CSS ile basit pasta grafikler veya ilerleme çubukları oluşturmak için oldukça faydalıdır.
Geri Bildirim Gönder
Aracı geliştirmemize yardımcı olmak için lütfen düşüncelerinizi bize bildirin.
Geri bildirim geçici olarak askıya alındı
Sunucu meşgul veya spam koruması etkin. Lütfen daha sonra tekrar deneyin.