TL
Tool Lab
💰Donate
💰Donate

CSS Gradient Generator

Create CSS gradients with preview

135°
Renk durakları
#3B82F60%
#8B5CF6100%
CSS çıktısı
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);

Bu araç hakkında

CSS Gradyan Oluşturucu, doğrudan CSS'inize yapıştırabileceğiniz pürüzsüz çok renkli gradyanlar oluşturur. İstediğiniz sayıda renk durağıyla doğrusal (yönlü) ve radyal (dairesel) gradyanları destekler.

Renk durakları, her rengin gradyan ekseni boyunca nerede başlayıp bittiğini tanımlar. Açı kaydırıcısı doğrusal gradyanları 0°'dan 360°'ye döndürür.

Nasıl kullanılır

  1. Gradyan türünü seçin: Doğrusal veya Radyal.
  2. Doğrusal gradyanlar için yön belirlemek üzere açı kaydırıcısını sürükleyin.
  3. Rengi değiştirmek için renk örneğine tıklayın ve pozisyon için kaydırıcıyı sürükleyin.
  4. Daha fazla durak eklemek için + Durak ekle'ye tıklayın. Silmek için ✕'e tıklayın.
  5. CSS background bildirimini kopyalamak için Kopyala'ya tıklayın.

Kullanım senaryoları

Web tasarımcıları hero bölümü arka planlarını resim yerine CSS gradyanlarla oluşturur. Marka ekipleri kurumsal renk kılavuzlarına uyan gradyan paletleri üretir. Geliştiriciler kartlar, düğmeler ve katmanları prototip olarak tasarlar.

Sık sorulan sorular

  • Doğrusal ve radyal gradyanlar arasındaki fark nedir?Doğrusal gradyan, belirli bir açıda düz bir çizgi boyunca renkleri geçirir. Radyal gradyan, merkez noktadan dışa doğru renkleri yayar.
  • İkiden fazla renk kullanabilir miyim?Evet. İstediğiniz kadar renk durağı eklemek için + Durak ekle'ye tıklayın.
  • Oluşturulan CSS tarayıcılar arası uyumlu mu?Evet. linear-gradient() ve radial-gradient() fonksiyonları tüm modern tarayıcılarda satıcı öneki olmadan tam olarak desteklenir.