CSS Gradient Oluştürücu

Guzel gradientler tasarlayin ve kullanıma hazir CSS kodu alin

CSS Gradient Oluştürücu

Gradient Tipi

Açı 135°

Yön

Renk Duraklari

Hazir Şablonlar

Canlı Önizleme

CSS Çıktısi

Tüm işlemler tarayıcınızda gerçekleşir. Hiçbir veri sunucuya gönderilmez.

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

Doğrusal gradientler, belirli bir açıda düz bir çizgi boyunca renkleri geçirir. Dairesel gradientler, merkez noktasından dışarıya doğru dairesel veya eliptik bir şekilde yayılır. Konik gradientler, bir renk çarkı veya pasta grafik gibi merkez noktası etrafında renkleri döndürür. Her üçü de tüm modern tarayıcılarda çalışan standart CSS üretir.

Açı kaydırıcısını (0-360 derece) kullanın. 0deg aşağıdan yukarıya, 90deg soldan sağa, 180deg yukarıdan aşağıya, 270deg sağdan sola gider. Oluşturulan CSS, tüm modern tarayıcılarla uyumlu derece değerini kullanır (örn. "linear-gradient(135deg, ...)").

Renk durağı, gradientteki belirli bir konumda (%0 ile %100 arasında) belirli bir renktir. %50'de orta durak eklemek, orta nokta rengini kontrol etmenizi sağlar. Aynı konumdaki duraklar sert bir kenar oluşturur — gradient, geçiş yapmak yerine bir renkten diğerine keskin bir şekilde atlar.

İki ardışık renk durağını aynı konuma yerleştirin. Örneğin: %50'de kırmızı durak ve %50'de mavi durak. Gradient, %0'dan %50'ye kadar düz kırmızı, ardından %50'den %100'e kadar düz mavi gösterir, düzgün geçiş yoktur. Çizgili arka planlar ve bayrak tasarımları için kullanılır.

Evet. Alfa kanalıyla rgba veya hsla değerleri kullanın. Örneğin, rgba(255, 0, 0, 0) saydam kırmızı, rgba(255, 0, 0, 1) ise düz kırmızıdır. Saydam'dan düze geçen bir gradient, solmayan-kararan efektler ve saydam hero bölümü gradientleri oluşturur.

Evet. Doğrusal, dairesel ve konik gradientler tüm modern tarayıcılarda (Chrome, Firefox, Safari, Edge) desteklenir. Konik gradientlerin tarayıcı desteği biraz daha yeni olmakla birlikte 2020'den beri iyi desteklenmektedir. CSS, -webkit- önekleri olmadan standart sözdizimini kullanır; bu önekler artık gerekli değildir.

Gün Doğumu: sıcak turuncu-pembeli doğrusal. Okyanus: koyu mavi-turkuaz doğrusal. Orman: yeşil-koyu yeşil. Gün Batımı: mor-turuncu diyagonal. Neon: canlı cyan-magenta. Pastel: yumuşak pembe-lavanta. Şablonlar başlangıç noktasıdır — yükledikten sonra renkleri ve açıları değiştirin.

Hayır. Her şey tarayıcınızda yerel olarak çalışır. Gradient verileriniz asla cihazınızdan ayrılmaz.

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.

Güvenlik ve Gizlilik

Verilerinizin güvenliği bizim önceliğimiz

Yerel İşleme

Tüm işlemler tarayıcınızda gerçekleşir

Veri Transferi Yok

Verileriniz sunucularımıza gönderilmez

Veri Depolama Yok

Hiçbir veri depolanmaz veya paylaşılmaz

SSL Şifreleme

Güvenli bağlantı için SSL şifreleme

Sonraki Adım

Renk Paleti Üretici

Profesyonel renk paletleri oluşturun, renk kodlarını dönüştürün ve görsellerden renk çıkarın

Box Shadow Oluşturucu

Birden fazla katman ile CSS box-shadow oluşturun

Bu araç işinize yaradı mı?

CSS Gradient Oluştürücu