CSS Gradyan Oluşturucu
Özel renk durakları ve bir açıyla doğrusal, radyal veya konik bir CSS gradyanı oluşturun, sonucu canlı önizleyin ve yapıştırmaya hazır background kuralını kopyalayın.
CSS Gradyan Oluşturucu — Bir gradyan türü seçin, açıyı ayarlayın ve ihtiyacınız kadar renk durağı ekleyin — her biri kendi rengine ve konum yüzdesine sahiptir. Siz düzenledikçe canlı önizleme kutusu güncellenir ve tek tıkla kopyalamak için yapıştırmaya hazır CSS background kuralı gösterilir. Her şey tamamen tarayıcınızda çalışır; hiçbir renk veya CSS asla bir sunucuya gönderilmez.
CSS Gradyan Oluşturucu nedir?
CSS Gradyan Oluşturucu, söz dizimini elle yazmadan hızlıca bir gradyana ihtiyaç duyan web tasarımcıları ve ön uç geliştiricileri için ücretsiz bir çevrimiçi araçtır. Doğrusal, radyal veya konik bir gradyan seçin, doğrusal ve konik türler için açıyı derece cinsinden ayarlayın ve her biri bir HEX rengi ile bir konum yüzdesine sahip renk durakları tanımlayın. Siz düzenlerken canlı önizleme sonucu gösterir ve eşleşen CSS background kuralı anında güncellenir, böylece onu doğrudan bir stil sayfasına kopyalayabilirsiniz. Düğmeler, hero arka planları, kartlar ve katmanlar tasarlamak ya da linear-gradient(), radial-gradient() ve conic-gradient() işlevlerinin nasıl çalıştığını öğrenmek için kullanın.
CSS Gradyan Oluşturucu nasıl kullanılır
- Gradyan türünü seçin: Doğrusal, Radyal veya Konik.
- Doğrusal veya konik bir gradyan için açıyı derece cinsinden ayarlayın (0-360); radyal, ortalanmış bir daire kullanır ve açıyı yok sayar.
- Her renk durağını düzenleyin: bir HEX rengi yazın veya seçin ve konumunu yüzde olarak ayarlayın (0-100).
- Başka bir renk eklemek için Durak ekle'ye veya bir durağı kaldırmak için çöp kutusu simgesine tıklayın (en az iki durak korunur).
- Canlı önizleme kutusunun güncellenmesini izleyin, ardından oluşturulan CSS background kuralını kopyala düğmesiyle kopyalayın.
Örnekler
Basit iki renkli doğrusal gradyan
Girdi
Doğrusal, 90deg, #4f86f7 %0'da ve #9333ea %100'de
Çıktı
background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%);
Üç duraklı radyal gradyan
Girdi
Radyal, duraklar #ffffff 0%, #4f86f7 50%, #1e3a8a 100%
Çıktı
background: radial-gradient(circle, #ffffff 0%, #4f86f7 50%, #1e3a8a 100%);
Bir renk çarkı için konik gradyan
Türü Konik'e değiştirin, başlangıç açısını ayarlayın ve renkleri bir merkez nokta çevresinde döndürmek için eşit aralıklı konumlara birkaç durak ekleyin — pasta grafiği benzeri örnekler veya yükleme döndürücüleri için kullanışlıdır.
Sıkça sorulan sorular
- Hangi gradyan türleri destekleniyor?
- Üç tür: linear-gradient (derece cinsinden bir açıyla), radial-gradient (ortalanmış bir daire) ve conic-gradient (bir başlangıç açısıyla). Tür değiştiriciyle aralarında geçiş yapın; CSS anında güncellenir.
- Renk durakları ve konumlar nasıl çalışır?
- Her durağın bir rengi ve 0 ile 100 arasında bir konum yüzdesi vardır. Duraklar, listede göründükleri sırayla, tarayıcının yorumladığı şekilde tam olarak CSS'ye yazılır, böylece sırayı doğrudan siz kontrol edersiniz. Durak ekle ile durak ekleyebilir ve en az ikiye kadar kaldırabilirsiniz.
- HEX yazmak yerine renkleri görsel olarak seçebilir miyim?
- Evet. Tarayıcınızın yerleşik renk seçicisini açmak için her durağın yanındaki küçük renk çipine tıklayın veya renk alanına doğrudan #4f86f7 gibi bir HEX değeri yazın. Önizleme ve CSS, siz değiştirdikçe güncellenir.
- Radyal gradyanlarda açı alanı neden kayboluyor?
- Buradaki radyal gradyan, açı kullanmayan ortalanmış bir daire olarak çizilir; bu nedenle açı alanı yalnızca yönü değiştirdiği doğrusal ve konik türlerde gösterilir.
- Renklerim veya CSS'im bir yere yükleniyor mu?
- Hayır. Gradyan, tamamen tarayıcınızda yerel dize ve renk hesaplamalarıyla oluşturulur — hiçbir renk, CSS veya ayar asla bir sunucuya gönderilmez, böylece çevrimdışı çalışır ve çalışmanızı gizli tutar.
İlgili araçlar
Koddan Görsele
Bir kod parçacığını tarayıcınızda, tema, gradyan veya saydam arka plan ve dolgu seçenekleriyle şık, söz dizimi vurgulu bir PNG kartına dönüştürün — yükleme yok.
Renk Kontrastı Denetleyici
Bir ön plan ve arka plan HEX rengi arasındaki WCAG kontrast oranını denetleyin ve normal ile büyük metin için AA ve AAA'yı geçip geçmediğini görün.
Renk Karıştırıcı
İki HEX rengi seçtiğiniz oranda RGB veya Lab renk uzayında harmanlayın ve ortaya çıkan ara rengi örnek ve kopyalanabilir HEX değeri olarak okuyun.
Renk Tonu Üretici
Tek bir temel HEX rengini, beyaza ve siyaha doğru karıştırarak Tailwind tarzı 50-950 ton ölçeğine dönüştürün; her adımda bir renk örneği ve kopyalanabilir HEX değeri.