CSS Gradyan Oluşturucu
Görsel olarak güzel CSS gradyanları oluşturun — renkleri, durak noktalarını, yönü ayarlayın ve kullanıma hazır CSS kodunu kopyası .
Renk durakları
CSS çıktısı
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);PixConvert Gradyan Oluşturucuyu Neden Kullanmalısınız?
Anında CSS çıktısı sağlayan görsel gradyan oluşturucu — onaltılık değerleri tahmin etmeye gerek yok.
Doğrusal ve Radyal
İstediğiniz açıda doğrusal gradyanlar veya yapılandırılabilir şekil ve konumda radyal gradyanlar oluşturun.
Çoklu Renk Durakları
Sürükleyerek konumlandırılabilen 10 adede kadar renk durağı ekleyin. RGBA ve HSLA dahil olmak üzere tüm CSS renklerini destekler.
Açı Kontrolü
Açı ayar düğmesini sürükleyin veya tam bir derece değeri girin. Sık kullanılan yönler (sağa, sağ alta) önceden ayarlanmıştır.
Canlı Önizleme
Değerlerden herhangi birini ayarladığınız anda, tam genişlikte gradyan önizlemesi gerçek zamanlı olarak güncellenir.
Yapıştırmaya Hazır CSS
Çıktı, herhangi bir stil sayfasına yapıştırılmaya hazır, temiz bir CSS arka planını özelliği dizesidir.
Rastgeleleştir
Anında ilham almak için Rastgeleleştir'e tıklayın — güzel bir rastgele degrade kombinasyonu oluşturur.
CSS Gradyan Kullanım Örnekleri
Modern kullanıcı arayüzü tasarımında gradyanlar her yerde karşımıza çıkıyor.
Kahraman Arka Planları
Açılış sayfasının ana bölümleri için zengin arka planını gradyanları oluşturun.
- Tam sayfa kahraman arka planları
- Bölüm ayırıcı eğimleri
- Görüntüler üzerine gradyan katmanları
Düğme ve Kart Tasarımı
Düğmelere, kartlara ve rozetlere ince gradyan dolgularla derinlik katın.
- Birincil işlem düğmesi gradyanları
- Kart başlığı vurguları
- İlerleme çubuğu doluyor
Marka Tasarımı
Markanızla tutarlı, renk paletinize uygun geçişli tonlar oluşturun.
- Logo arka planını gradyanları
- Uygulama simgesi arka planları
- Sosyal medya içerikleri
CSS Gradyanı Nasıl Oluşturulur?
Doğrusal, radyal veya konik tip seçin. Renklerinizi seçin ve durma noktalarını ayarlayın. Açıyı veya yönü belirleyin.
Canlı önizleme anında güncellenir. Kullanıma hazır CSS arka planını değerini kopyası için "CSS'yi Kopyala"ya tıklayın.
Doğrusal ve radyal tipler arasında geçiş yapın ve açıyı veya şekli ayarlayın; elde edilen arka planını stil sayfanıza yapıştırın.
Daha Fazla Araç Keşfedin
Bu araçla birlikte harika çalışan diğer ücretsiz araçları keşfedin.
Kontrast Denetleyicisi
WCAG uyumluluğu için renk kontrast oranlarını kontrol edin.
Kutu Gölge Oluşturucu
Canlı önizleme ile CSS kutu gölgeleri tasarlayın
Renk Dönüştürücü
HEX, RGB ve HSL renk kodlarını anında dönüştürün
Renk Paleti Çıkarıcı
Herhangi bir görüntüden baskın renkleri çıkarın.
JSON Biçimlendirici
JSON verilerini anında biçimlendirin, doğrulayın ve küçültün.
Regex Test Cihazı
Düzenli ifadeleri canlı olarak test edin ve hata ayıklayın.
Sıkça Sorulan Sorular
CSS gradyanları açıklandı.
CSS gradyanı nedir?
CSS gradyanı, resim kullanılmadan, yalnızca CSS ile tanımlanmış iki veya daha fazla renk arasında yumuşak bir geçişi ifade eder. Türleri: doğrusal gradyan (yönlü), radyal gradyan (dairesel/eliptik), konik gradyan (merkez noktası etrafında dönen).
-webkit- önekine ihtiyacım var mı?
Hayır, modern tarayıcılar için (Chrome 26+, Firefox 16+, Safari 7+). -webkit- öneki yalnızca çok eski tarayıcılar için gereklidir. IE10/eski Safari desteğine ihtiyacınız varsa, seçeneklerden etkinleştirin.
Şeffaf bir gradyan nasıl oluştururum?
RGBA renklerini kullanın — örneğin, şeffaf için rgba(0, 0, 0, 0). Şeffafa geçiş için, son durdurma noktasını beyazdan şeffafa geçiş için rgba(255,255,255,0) veya siyahtan şeffafa geçiş için rgba(0,0,0,0) olarak ayarlayın.
Gradyanlarda CSS değişkenleri kullanabilir miyim?
Evet, ancak bu görsel araç onaltılık/rgba değerleri üretir. CSS özel özelliklerini kullanmak için çıktıyı kopyası ve renk değerlerini değişkenlerinizle manuel olarak değiştirin (örneğin var(--color-primary)).
Hangi tarayıcılar conic-gradient'i destekliyor?
`conic-gradient` Chrome 69+, Edge 79+, Safari 12.1+ ve Firefox 83+ sürümlerinde desteklenmektedir. Internet Explorer'da desteklenmemektedir. Aşamalı iyileştirme için `@supports (arka planını: conic-gradient(red, blue))` kullanın.