Lineer — renkler seçilen açıda düz bir çizgi boyunca geçer (0° = aşağıdan yukarı, 90° = soldan sağa, 180° = yukarıdan aşağı). Radial — renkler bir daire veya elips olarak merkez noktasından dışa yayılır. Spotlight veya vinyet efektleri için harika.

CSS Gradient Oluşturucu

Lineer ve radial CSS gradient'larını görsel olarak kur. Renk durak noktalarını düzenle, yapıştırılmaya hazır CSS'i kopyala.

Tür

Angle 90°

Color stops

Preview

CSS

Bu ne işe yarar?

CSS gradient'lar herhangi bir görsel varlık olmadan arka planlar, düğmeler, hero paneller ve overlay'ler için pürüzsüz renk geçişleri çizen tek satır CSS'tir. Sözdizimi güçlüdür ama elle yazılması zahmetlidir: açılar, yüzde durakları, tekrarlanan varyantlar, lineer ile radial karıştırma. Bu araç gerçek zamanlı CSS'i yansıtan görsel bir builder sunar, böylece bir durağı yerine sürükleyebilir ve tam linear-gradient(...) veya radial-gradient(...) string'ini kopyalayabilirsin.

Ne zaman kullanılır

Bir görsele yakmadan hero veya call-to-action bölüm arka planı kurma.
Görsel varlık olmadan "modern" görünen düğme veya kart hover durumları oluşturma.
Marka renkli overlay mockup'u (gradient + metin okunabilirliği için düşük opaklık solid).
Dekoratif divider'lar, mesh stili arka planlar veya animated SVG fill'ler üretme.

Lineer - radial

Lineer — renkler seçilen açıda düz bir çizgi boyunca geçer (0° = aşağıdan yukarı, 90° = soldan sağa, 180° = yukarıdan aşağı).
Radial — renkler bir daire veya elips olarak merkez noktasından dışa yayılır. Spotlight veya vinyet efektleri için harika.

Sık yapılan hatalar

background olarak kullan, background-color değil. Gradient'lar görsellerdir, renkler değil. background-color yok sayılır.
Duraklar sıralı olmalı öngörülebilir render için. Araç bunları otomatik sıralar — CSS'i kopyalayıp elle düzenliyorsan yüzdeleri monoton tut.
Sert duraklar (aynı yüzdede iki durak) fade yerine keskin sınır yapar — çizgili veya bant efektler için kullanışlı.
Büyük alanlarda banding. Uzun, düşük kontrastlı gradient'lar 8-bit ekranlarda görünür "bantlar" gösterebilir. Küçük bir SVG noise overlay ekle (filter: url(#noise)) veya durakları hafifçe kaydır.
Performans. Tarayıcılar gradient'ları hızlı boyar ama background-image'ı animate etmek her karede paint tetikler — yukarıdaki bir katmanda transform'u animate et.
Erişilebilirlik. Bir gradient üzerinde metin oturuyorsa, kontrast oranını gradient boyunca metnin göründüğü en kötü noktaya karşı kontrol et, ortalamasına değil.