CSS Gradient Oluştürücu
Guzel gradientler tasarlayin ve kullanıma hazir CSS kodu alin
CSS Gradient Oluştürücu
Canlı Önizleme
CSS Çıktısi
Kullanım Örnekleri
Sicak Gradient
Gun dogumu türüncusundan gün batimi pembegine gecis yapan guzel bir sicak gradient.
Okyanus Gradienti
Derin maviden turkuaza okyanus esinli serin bir gradient.
Dairesel Parlama
Merkezden spot isigi veya parlama efekti oluşturan dairesel bir gradient.
Özellikler
Birden Fazla Gradient Tipi
Yön ve konum üzerinde tam kontrol ile doğrusal, dairesel ve konik gradientler oluştürün
Canlı Görsel Önizleme
Renkleri, durakları, acilari ve konumlari ayarladikca gradientin gerçek zamanli güncelledigini görün
Birden Fazla Renk Duragi
Karmaşık, guzel gradientler için konum kontrollu sinirsiz renk durağı ekleyin
Gizlilik Oncelikli
Her sey tarayıcınızda çalışır — hiçbir veri sunucuya gönderilmez
Nasıl Kullanılır?
Tip ve Renkleri Seçin
Bir gradient tipi (doğrusal, dairesel, konik) seçin ve renk seçici ile renk durakları ekleyin.
Yönu Ayarlayın
Doğrusal gradientler için açı kaydiricisini veya dairesel ve konik tipler için konum kontrollerini kullanin.
CSS Kodunu Kopyalayın
Oluştürülan gradient kodunu panoya kopyalamak için CSS Kopyala butonuna tıklayın.
Sık Sorulan Sorular
CSS Gradient Oluşturucu Nedir?
CSS gradient oluşturucu, sözdizimini ezberlemeden gradient arka planları görsel olarak tasarlamanızı sağlar. Gradient tipinizi (doğrusal, dairesel veya konik) seçin, renk durakları ekleyin, açı veya konumu ayarlayın. Araç, projenize direkt yapıştırabileceğiniz temiz CSS kodu üretir.
Temel Özellikler
Üç CSS gradient tipi tek bir araçta. Sürüklenebilir sınırsız renk durağı. Doğrusal gradientler için açı kaydırıcısı ve dairesel/konik gradientler için konum kontrolleri. Hızlı başlamak için güzel hazır şablonlar. Oluşturulan CSS, eski tarayıcı desteği için -webkit öneklerini içerir.
Yaygın Kullanım Alanları
Hero bölümü arka planları, buton hover durumları, kart katmanları ve dekoratif kenarlıklar. Dairesel gradientler spot ışığı efektleri için, konik gradientler ise renk çarkları veya pasta grafik tarzı görseller için idealdir.
İpuçları
Temiz tasarımlar için 2-3 renkle sınırlı kalın. Yumuşak geçişler için komşu renkler (renk çarkında yan yana olanlar) kullanın. İnce bir arka plan için birbirine çok yakın iki ton arasında gradient deneyin. Ve gradientinizi hem açık hem koyu arka planda mutlaka kontrol edin.
Gizlilik
Tamamen tarayıcınızda çalışır. Renkler, ayarlar, hiçbir şey bir yere yüklenmez.