Araçlar/Kod & Geliştirici/CSS Gradient Oluşturucu

CSS Gradient Oluşturucu

Web siteniz için harika arka plan geçişleri oluşturun ve CSS kodunu anında kopyalayın.

%100 cihazda · 0 yükleme

Renk 1

Renk 2

Gradient Tipi

Açı: 90°

background: linear-gradient(90deg, #4f46e5 0%, #ec4899 100%);

CSS Degradesi Nasıl Oluşturulur?

Renklerinizi seçin

Görsel seçicilerle iki veya daha çok renk belirleyin.

Tür ve açıyı ayarlayın

Doğrusal ile dairesel arasında geçin, yönü döndürün, durakları taşıyın.

CSS kodunu kopyalayın

Hazır background özelliğini alın ve stil dosyanıza yapıştırın.

Neden Bu Degrade Üreteci?

✓Canlı önizlemeli görsel düzenleme

✓Tam açı kontrollü doğrusal ve dairesel

✓Temiz kopyala-yapıştır CSS çıktısı

✓Ücretsiz, anında, üyeliksiz

Sık Sorulan Sorular

Hangi degrade türleri destekleniyor?+

Her açıda doğrusal degradeler ve merkez noktadan dairesel degradeler — arayüz tasarımının neredeyse tamamını kapsayan iki temel tür.

Üretilen CSS her yerde uyumlu mu?+

Evet — standart linear-gradient() ve radial-gradient() sözdizimi yıllardır tüm tarayıcılarca desteklenir; önek gerekmez.

Degradeler nasıl profesyonel görünür?+

Komşu tonları yakın tutun (maviden mora; maviden turuncuya değil), saf siyah/beyaz uçlardan kaçının ve dümdüz aşağı yerine 135° gibi hafif bir açı düşünün.

İkiden çok renk kullanabilir miyim?+

Evet — gün doğumu tarzı çok renkli geçişler için birden çok renk durağı ekleyin. Önizleme canlı güncellenir.