Ana içeriğe geç
LibraTool logoLibraTool

Ücretsiz CSS Gradyan Oluşturucu

Canlı önizlemeyle doğrusal, radyal ve konik CSS gradyanları oluşturun. CSS'i tek tıklamayla kopyalayın.

Yüklendikten sonra çevrimdışı çalışır
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Birbirinden çok farklı renkler arasındaki gri ara tonları önler. Eski tarayıcılar için yedek olarak düz bir sRGB satırı ekler.

0%
100%

Ön ayarlar

Yaygın kullanımlar

  • Hero Bölümleri için Gradyanlar OluşturWeb sitesi hero bölümleri ve açılış sayfaları için tam sayfa gradyan arka planları tasarla.
  • Gradyan Düğmeleri ve CTA'lar OluşturDikkat çeken eylem çağrıları için dikkat çeken gradyan düğme arka planları tasarla.
  • Kartlar için Gradyan Arka Planları OluşturKartlar, modal'lar, yan çubuklar ve UI bileşen arka planları için gradyan dolgularını tasarla.
  • Sosyal Medya Grafikleri için Gradyanlar OluşturInstagram gönderileri, YouTube küçük resimleri ve Twitter kartları için canlı gradyan arka planları tasarla.
  • Grafikler için Renk Ölçekleri OluşturIsı haritaları, ilerleme çubukları ve veri görselleştirmeleri için gradyan renk ölçekleri oluştur.

Nasıl çalışır

Gradyan oluşturucu CSS gradyan dizelerini doğrudan tarayıcıda oluşturur — kütüphane yok, sunucu yok, yükleme yok. Elle yazılmış bir işlev, renk duraklarınızdan ve açınızdan doğru linear-gradient, radial-gradient veya conic-gradient sözdizimini gerçek zamanlı oluşturur, ardından sonucu seçtiğiniz çıktı hedefine göre biçimlendirir.

  1. 1
    Durakları ve yönü yapılandırın
    Tarayıcının yerel renk seçicisini kullanarak 2 ile 6 arasında renk durağı ayarlarsınız, ardından her durağı bir aralık kaydırıcısıyla 0–100% ekseni boyunca konumlandırırsınız. Doğrusal ve konik gradyanlar için bir açı (0–360°) da seçersiniz; radyal gradyanlar için şekli (elips veya daire) ve gradyanın ne kadar uzanacağını belirleyen boyut anahtar kelimesini seçersiniz.
  2. 2
    buildCss gradyan dizesini oluşturur
    Her değişiklikte yerel bir buildCss işlevi parametrelerinizi doğru CSS işlev çağrısında birleştirir — ör. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Hiçbir kütüphane kullanılmaz; dize düz JavaScript şablon mantığıyla oluşturulur ve doğrudan durak dizisinden birleştirilir.
  3. 3
    Canlı önizleme satır içi stille çizilir
    Oluşturulan gradyan dizesi satır içi arka plan stili olarak doğrudan bir div öğesine uygulanır; böylece önizlemeyi tarayıcının kendi CSS motoru çizer. Canvas veya görüntü yoktur — gördüğünüz, kelimenin tam anlamıyla uygulanan CSS özelliğidir.
  4. 4
    Dört biçimde kopyalamaya hazır çıktı
    Bir biçim seçici aynı gradyan dizesini düz CSS'e (background: ...), düz renk yedekli bir CSS bloğuna, bir Tailwind keyfi değer sınıfına veya bir SCSS değişken bildirimine dönüştürür. Kopyala'ya tıklamak seçili çıktıyı navigator.clipboard.writeText ile panoya yazar. Geçerli gradyan ayrıca URL hash'ine kodlanır; böylece yer imlerine ekleyebilir veya paylaşabilirsiniz.

İlgili araçlar

🟦

CSS Grid Oluşturucu

Görsel olarak bir CSS grid tasarlayın — izler, birimler ve boşluklar — ve oluşturulan CSS ve HTML'yi kopyalayın.

Deneyin
↔️

CSS Flexbox Oluşturucu

Flex yönü, sarma, yaslama ve hizalama ile canlı öğeler üzerinde deney yapın — ve CSS'i kopyalayın.

Deneyin
🧮

Matris Hesaplayıcı

Matrisleri toplayın, çıkarın, çarpın, devrik ve tersini alın, indirgeyin; ayrıca determinant, rank, özdeğerler ve Ax = b çözümü. 8×8'e kadar, tek dokunuşla kopyalama. Ücretsiz ve gizli.

Deneyin

Sık sorulan sorular