CSS Gradyan Oluşturucu
Nedir CSS Gradyan Oluşturucu
CSS gradyan oluşturucu, doğrusal veya radyal bir gradyanı görsel olarak kurmanızı ve tam CSS'ini kopyalamanızı sağlar. Gradyan türünü seçin, açıyı (doğrusal) ya da şekil ve konumu (radyal) ayarlayın, ihtiyacınız kadar renk durağı ekleyin ve her birini doğru noktaya sürükleyin. Önizleme anında güncellenir; çıktı kutusu her zaman yapıştırmaya hazır bir background bildirimi gösterir.
Nasıl kullanılır
- Gradyan türü olarak Doğrusal veya Radyal seçin.
- Doğrusal gradyanlar için açı kaydırıcısını ayarlayın; radyal olanlar için şekil ve konum seçin.
- Her renk durağının rengini ve konumunu belirleyin; Renk durağı ekle düğmesiyle yeni duraklar ekleyin.
- Oluşturulan CSS'i çıktı kutusundan kopyalayın ve stil dosyanıza yapıştırın.
Ne zaman kullanılır
Bir hero bölümü kuruyor ve maviden pembeye akıcı bir zemin mi istiyorsunuz? %0 ve %100'de iki durak koyun, bir açı seçin ve background: linear-gradient(90deg, #3B82F6 0%, #EC4899 100%); satırını doğrudan CSS'inize kopyalayın. Kart kaplamaları, düğme hover durumları veya logo arkasında radyal bir parıltı için de aynı derecede pratik — devtools'ta gradyan sözdizimiyle boğuşmadan.
Sık sorulan sorular
Doğrusal ile radyal gradyan arasındaki fark nedir?
Doğrusal gradyan renkleri sabit bir açıda düz bir çizgi boyunca geçirir; turuncudan mora solan bir gün batımı gibi. Radyal gradyan renkleri bir merkez noktadan dışa doğru daire veya elips şeklinde geçirir; spot ışığı veya parıltı efekti gibi.
Kaç renk durağı ekleyebilirim?
İstediğiniz kadar. Her gradyanın görüntülenmesi için en az iki durak gerekir; gökkuşağı veya marka paletleri gibi çok renkli geçişler için Renk durağı ekle düğmesiyle daha fazlasını ekleyebilirsiniz.
Her duraktaki yüzde konumları ne anlama geliyor?
Konum, o rengin gradyan boyunca tam güce ulaştığı yerdir; %0 (başlangıç) ile %100 (bitiş) arasında. Bir durağın konumunu taşımak, renginin nerede baskın olacağını ve komşularıyla nasıl karışacağını değiştirir.
Oluşturulan CSS tüm tarayıcılarda çalışır mı?
Evet. linear-gradient() ve radial-gradient() her modern tarayıcının desteklediği standart CSS işlevleridir; üretici öneki gerekmez.
Bu aracı gradyanım dolu şekilde paylaşabilir miyim?
Evet. Gradyanı kurdukça URL otomatik güncellenir. Adres çubuğundan kopyalayın veya Paylaş düğmesini kullanın; bağlantıyı açan herkes birebir aynı gradyanı görür.
İlgili araçlar
En Boy Oranı Hesaplama
En boy oranını hesaplayın, eksik genişlik veya yüksekliği bulun ve görselleri, videoları oranı bozmadan yeniden boyutlandırın. Ücretsiz.
Barkod Oluşturucu
Online EAN-13 veya Code 128 barkod oluşturun. Sayınızı veya metninizi girin, SVG ya da PNG olarak indirin. Ücretsiz, kayıt gerekmez.
Base64 Çözücü
Base64 dizelerini tarayıcınızda anında düz metne çözün. Emojiler dahil tam Unicode çıktı desteği. Ücretsiz online Base64 çözücü.