CSS Gradient Generator

Canlı önizleme ile doğrusal ve dairesel CSS gradyanlarını görsel olarak oluşturun.

{{ stop.position }}% 
{{ cssOutput }}

CSS Gradyanı nedir?

CSS gradyanları, iki veya daha fazla renk arasında pirüzsüz renk geçişleri oluşturur. Genellikle düğmeler, başlıklar, hero bölümleri ve dekoratif elemanların arka planı olarak kullanılır. Herhangi bir açıda doğrusal geçişler oluşturmak için linear-gradient(), dairesel veya eliptik geçişler için radial-gradient() kullanın.

Linear Gradient ve Radial Gradient karşılaştırması

Linear Gradient düz bir eksen boyunca ilerler — yukarıdan aşağıya, soldan sağa veya herhangi bir açıda. Radial Gradient bir merkez noktasından dışarıya doğru yayılır; daire veya elips şeklinde olabilir. Her iki tür de ayarlanabilir konumlarla istenen sayıda renk durağını destekler.

Güzel gradyanlar için ipuçları

  • Temiz bir görünüm için en fazla 2–3 renk kullanın.
  • Benzer tonlar (örn. mavi → teal) uyumlu bir etki yaratır.
  • Sert kenarlardan kaçınmak için renk duraklarını birbirine çok yakın yerleştirmeyin.
  • Gradyanı farklı ekran boyutlarında test edin.