CSS Gradyan

Doğrusal, dairesel veya konik — sınırsız renk durağı, canlı önizleme, anında CSS.

Bu CSS gradyan oluşturucu nedir?

Bu ücretsiz CSS gradyan oluşturucu; sınırsız renk durağı ile linear, radial ve conic gradyanlar tasarlamanıza, açıyı görsel olarak dial ile ayarlamanıza, repeating modunu açıp kapatmanıza ve üretim kalitesinde CSS kopyalamanıza imkân verir — her şey tarayıcınızda çalışır.

Çok duraklı bir CSS gradyanı çevrimiçi nasıl oluştururum?

Bir gradyan tipi seçin (linear, radial veya conic), ihtiyacınız kadar renk durağı ekleyin, çubuk boyunca sürükleyerek konumlarını ayarlayın ve üretilen CSS'i kopyalayın. Önizleme canlı güncellenir, kod tek tıkla uzakta.

Öne çıkan özellikler

Üç gradyan tipi
Linear, radial ve conic — her birinin kendi ergonomik kontrolleri (açı dial'ı, şekil ve konum seçicileri, başlangıç açısı).
Sınırsız renk durağı
İhtiyacınız kadar durak ekleyin, her birinin rengini ve konumunu ayarlayın, tek tıkla silin veya yeniden sıralayın.
Repeating modu
Tek bir geçiş, herhangi bir gradyanı repeating-linear, repeating-radial veya repeating-conic'e dönüştürür — şeritler, tarama çizgileri ve güneş ışınları için.
Üretim kalitesinde kopya
Kanonik CSS veya doğrudan kullanım için Tailwind rastgele-değer sınıfını tek tıkla alın.

Nasıl kullanılır

Segmentli kontrolden gradyan tipini seçin. Linear için açı dial'ını sürükleyin; radial için şekil ve konum seçin; conic için başlangıç açısını ayarlayın. Aşağıdaki çubukta her renk durağını ayarlayın, artı düğmesiyle yeni durak ekleyin, hazır olduğunuzda CSS'i kopyalayın.

Sıkça sorulan sorular

Linear, radial ve conic gradyan arasındaki fark nedir?

Linear, bir açıdaki düz çizgi boyunca harmanlar; radial, bir merkez noktadan daire veya elips şeklinde dışa doğru yayılır; conic ise renkleri bir merkez nokta etrafında pasta dilimi gibi tarar.

Konumlu renk durakları nasıl çalışır?

Her durak bir renk ve isteğe bağlı bir konum yüzdesine sahiptir. Tarayıcı ardışık duraklar arasında enterpolasyon yapar. İki bitişik durağı aynı konuma sabitlemek sert bir çizgi oluşturur — şeritler veya bölünmüş arka planlar bu şekilde kurulur.

Repeating gradyan ne zaman kullanılmalı?

Şeritler, tarama çizgileri veya güneş ışınları için Tekrarlama modunu açın. Tarayıcı aynı gradyanı süresiz olarak döşer; %0 ve %10'daki iki durak kutuyu %10 genişliğinde tekrarlanan bir desenle doldurur.

Tooljar ekibi tarafından W3C CSS Images Module Level 3 ve Level 4 spesifikasyonlarına göre kurulmuştur; tarayıcının ayrıştırdığı aynı gradyan söz dizimi kullanılır, böylece önizlediğiniz şey tam olarak üretim CSS'inin boyayacağı şeydir.