CSS Gradyan Oluşturucu

Ne yapar

CSS gradyan oluşturucu, bir gradyanı gözle tasarlamanızı ve son CSS’i kopyalamanızı sağlar. Doğrusal, dairesel veya konik bir gradyan seçin, istediğiniz kadar renk durağı ekleyin, konumlarını sürükleyin, açıyı ya da merkez noktasını ayarlayın; önizleme anında güncellenir. Mevcut bir linear-gradient(…), radial-gradient(…) veya conic-gradient(…) kodunu yapıştırıp görsel olarak düzenleyebilirsiniz de. Her şey tarayıcınızda çalışır.

Nasıl kullanılır

1. Bir hazır ayarla başlayın ya da örnek gradyanı kullanın.
2. Türü seçin. Doğrusal ve konik gradyanların açısı vardır; dairesel ve konik gradyanların ise Merkez X ve Merkez Y ile taşıyabileceğiniz bir merkezi vardır.
3. Renk duraklarını düzenleyin: rengi seçiciyle değiştirin ya da herhangi bir CSS rengi yazın, Konum’u sürükleyin, en geniş boşluğa durak eklemek için + Durak ekle’yi, sırayı çevirmek için Ters çevir’i kullanın.
4. Şeritler ve halkalar için gradyanı döşemek üzere Tekrarla’yı açın.
5. Kodu CSS kartından kopyalayın; isterseniz çok eski tarayıcılar için düz renk yedeğiyle birlikte.

Alttaki Gradyan CSS kutusu gradyan değerini gösterir ve düzenlenebilir: stil dosyanızdan ya da bir tasarım aracından gradyan yapıştırın, denetimler onu okur.

Örnek

.hero {
  background-color: #667eea;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

İyi gradyanlar için ipuçları

• Abartmayın. Komşu iki ton (maviden mora, turuncudan pembeye) zıt renklerden daha yumuşak görünür; zıt renkler ortada bulanık bir griye dönebilir.
• Ortaya bir durak ekleyerek karışımı kontrol edin. Komşularından biraz daha açık üçüncü bir durak yumuşak bir parlama verir.
• Sert duraklar şekil oluşturur. Aynı konumdaki duraklar keskin kenarlar yaratır; çizgiler, bayraklar, ilerleme çubukları ve pasta grafikler bu yöntemi kullanır.
• Yönler. to right 90deg’e, to bottom (varsayılan) 180deg’e eşittir. Açılar yukarıdan saat yönünde ölçülür.
• Gradyan üzerindeki metin gradyanın tamamında okunur kalmalıdır. En açık ve en koyu durağı bir kontrast denetleyicisiyle metin rengine karşı kontrol edin.