CSS Repeating Gradient Kullanımı ve Örnekler

Repeating gradient (tekrarlayan gradient), linear-gradient ve radial-gradient'in tekrarlayan versiyonlarıdır. Gradient renk durakları, tanımlanan aralıkta bittikten sonra başa dönerek tekrar eder. Bu sayede çizgili, dama tahtası ve benzeri desenler sadece CSS ile oluşturulabilir. Bu rehberde repeating-linear-gradient, repeating-radial-gradient ve pratik desen örneklerini ele alıyoruz.

repeating-linear-gradient Nedir?

repeating-linear-gradient, sözdizimi açısından linear-gradient ile aynıdır. Fark, renk durakları (color stops) tamamlandığında gradient'in tekrar başlamasıdır. Bu davranış, özellikle yüzde veya piksel cinsinden sabit aralıklarla tanımlanan duraklarda belirgin olur.

.stripes {
  background: repeating-linear-gradient(
    90deg,
    #667eea,
    #667eea 10px,
    #764ba2 10px,
    #764ba2 20px
  );
}

Bu örnekte 90 derece açıyla yatay çizgiler oluşur. 0-10px arası mor-mavi (#667eea), 10-20px arası mor (#764ba2) rengindedir. 20px'ten sonra desen tekrarlanır.

Çizgili Desenler (Stripes)

En yaygın kullanım alanı çizgili arka planlardır. Açıyı değiştirerek yatay (0deg veya 90deg), dikey (90deg) veya çapraz (45deg, 135deg) çizgiler elde edebilirsiniz.

.diagonal-stripes {
  background: repeating-linear-gradient(
    45deg,
    #f8f9fa 0px,
    #f8f9fa 10px,
    #e9ecef 10px,
    #e9ecef 20px
  );
}

İnce Çizgili Efekt

Çok ince çizgiler için piksel değerlerini küçültün. Örneğin 2px genişliğinde ince çizgiler oluşturmak için 0-2px ve 2-4px aralıkları kullanılır.

.thin-stripes {
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.05) 2px,
    rgba(0,0,0,0.05) 4px
  );
}

Dama Tahtası (Checkerboard)

Dama tahtası deseni, iki repeating-linear-gradient katmanının üst üste bindirilmesiyle oluşturulur. Biri yatay, diğeri dikey veya her ikisi de 45 derece açıyla kullanılabilir.

.checkerboard {
  background-color: #fff;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 20px,
      rgba(0,0,0,0.1) 20px,
      rgba(0,0,0,0.1) 40px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 20px,
      rgba(0,0,0,0.1) 20px,
      rgba(0,0,0,0.1) 40px
    );
}

Gerçek dama tahtası için iki renkli kareler gerekir. Bunu elde etmek için conic-gradient veya daha karmaşık repeating-linear-gradient kombinasyonları kullanılabilir.

.checkerboard-colors {
  background-color: #667eea;
  background-image: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 20px,
      rgba(255,255,255,0.1) 20px,
      rgba(255,255,255,0.1) 40px
    );
}

repeating-radial-gradient

repeating-radial-gradient, merkezden dışa doğru tekrarlayan halkalar veya radyal bantlar oluşturur. Hedef boyut veya yüzde ile durma noktaları belirlenir.

.radial-rings {
  background: repeating-radial-gradient(
    circle at center,
    #667eea 0,
    #667eea 10px,
    #764ba2 10px,
    #764ba2 20px
  );
}

repeating-conic-gradient

repeating-conic-gradient (conic gradient'ın tekrarlayan versiyonu) açısal bölümler oluşturur. Pasta dilimi benzeri veya dairesel açısal desenler için kullanılır.

.conic-stripes {
  background: repeating-conic-gradient(
    #667eea 0deg 30deg,
    #764ba2 30deg 60deg
  );
}

Renk Durağı Teknikleri

Renk duraklarında (color stops) keskin geçiş için aynı piksel veya yüzde değerinde iki farklı renk tanımlanır. Yumuşak geçiş için aralık bırakılır. Örneğin #667eea 0%, #667eea 10px ile #764ba2 10px arasında ani geçiş olur; #667eea 0%, #764ba2 50% ile yumuşak geçiş elde edilir. Repeating gradient'ta bu aralık desenin tekrarlama mesafesini belirler.

Performans ve Tarayıcı Desteği

Repeating gradient'lar tüm modern tarayıcılarda desteklenir: Chrome, Firefox, Safari, Edge. Çok karmaşık veya çok sayıda katman kullanıldığında render maliyeti artabilir; büyük alanlarda dikkatli kullanın. Repeating conic gradient biraz daha yeni bir özelliktir; eski tarayıcılarda fallback için düz renk veya linear gradient kullanılabilir. CSS Gradient Performans rehberimizde optimizasyon ipuçlarını bulabilirsiniz.

Özet

Repeating gradient ile çizgili, dama tahtası ve radyal desenler saf CSS ile oluşturulabilir. repeating-linear-gradient en çok kullanılan türdür. Gradient Oluşturucu ile renklerinizi seçip bu desenlerde deneyebilirsiniz. İlgili rehberler: CSS Gradient Nedir?, Arka Plan Desenleri ve Linear, Radial, Conic Farkı.