CSS Gradyan Üretici

Canlı önizlemeyle doğrusal, radyal veya konik CSS gradyanı oluştur. Renkleri, durak konumlarını ve yönü ayarla; üretilen arka plan kuralını kopyala.

Renk Durakları

#ff6b6b
#4ecdc4

Canlı Önizleme

CSS Kodu

background: linear-gradient(45deg, #ff6b6b 0%, #4ecdc4 100%);
Gelişmiş Seçenekler

Geçmiş

1 / 1
Hazır Şablonlar
Geçmiş
1 gradyan

İpuçları

Doğrusal gradyanlar renkleri düz bir çizgide geçiş yapar. İnce arka planlar ve modern tasarımlar için mükemmel.

CSS Gradyan Üretici

Her renk durağını elle yazmadan CSS arka plan gradyanı oluştur. Yönlü geçiş için doğrusal, merkez çevresindeki geçiş için radyal, açı çevresinde sıralanan renkler için konik türü seç. %0’da #ff6b6b ve %100’de #4ecdc4 gibi iki durakla başla; geçişi önizlemede ayarla.


Üretilen çıktı, seçtiğin türü, yönü ve sıralı durakları kullanan bir background bildirimidir. Bunu projendeki CSS seçicisine yapıştır. Önizleme renk geçişini incelemeye yardım eder; gradyan üzerine konan metnin bütün alanda yeterli kontrasta sahip olup olmadığını denetlemez. Bu kontrolü son yerleşimde yap.

Özellikler

  • Doğrusal, radyal veya konik gradyan türünü seç.
  • Renk duraklarını ekle, kaldır ve konumlandır.
  • Türe uygun yön, açı veya merkez seçeneklerini ayarla.
  • Değişiklikleri önizle, hazır örnek uygula ve üretilen CSS arka plan kuralını kopyala.

Nasıl kullanılır

  1. Gradyan türünü seç; yönlü geçiş istiyorsan doğrusal türle başla.
  2. En az iki renk seç ve yüzde konumlarını ayarla.
  3. Yönü veya açıyı seçip canlı önizlemeyi ve üretilen CSS’i incele.
  4. Arka plan bildirimini CSS seçicine kopyala ve üzerine yerleştireceğin gerçek içerikle kontrol et.