CSS Gradient ile Arka Plan Desenleri Oluşturma

Görsel dosyası kullanmadan, sadece CSS gradient'ları ile çizgili, noktalı, chevron (ok) ve plaid (ekose) gibi arka plan desenleri oluşturmak mümkündür. Bu yöntem ekstra HTTP isteği gerektirmez, responsive'dir ve renkler kolayca özelleştirilebilir. Bu rehberde linear-gradient, radial-gradient ve repeating-linear-gradient kullanarak pratik desen örneklerini paylaşıyoruz.

Çizgili Desenler (Stripes)

Çizgili desenler repeating-linear-gradient ile en basit şekilde elde edilir. Açı ve renk duraklarını ayarlayarak yatay, dikey veya çapraz çizgiler oluşturabilirsiniz.

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

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

Noktalı Desenler (Dots)

Noktalı desen için radial-gradient kullanılır. Her nokta küçük bir daire olarak tanımlanır; background-size ile noktaların aralığı ve boyutu ayarlanır.

.dots-pattern {
  background-color: #fff;
  background-image: radial-gradient(
    circle,
    #667eea 2px,
    transparent 2px
  );
  background-size: 24px 24px;
}

Noktaların rengi ve boyutu radial-gradient içinde, aralığı background-size ile değiştirilir. Daha büyük noktalar için ikinci renk durağını artırın (örn. 4px).

İki Renkli Noktalar

Arka plan rengi ve nokta rengi ile iki tonlu bir desen elde edilir.

.dots-two-tone {
  background-color: #f8f9fa;
  background-image: radial-gradient(
    circle at center,
    #764ba2 2px,
    transparent 2px
  );
  background-size: 32px 32px;
}

Chevron (Ok) Deseni

Chevron deseni, zigzag benzeri ok şekillerinden oluşur. linear-gradient ile keskin geçişler kullanılarak elde edilir.

.chevron-pattern {
  background-color: #fff;
  background-image: linear-gradient(
      45deg,
      #e9ecef 25%,
      transparent 25%
    ),
    linear-gradient(
      -45deg,
      #e9ecef 25%,
      transparent 25%
    ),
    linear-gradient(
      45deg,
      transparent 75%,
      #e9ecef 75%
    ),
    linear-gradient(
      -45deg,
      transparent 75%,
      #e9ecef 75%
    );
  background-size: 20px 40px;
  background-position: 0 0, 0 20px, 20px -20px, -20px 0;
}

Plaid (Ekose) Deseni

Plaid veya ekose deseni, birkaç çizgili katmanın üst üste binmesiyle oluşturulur. Yatay ve dikey çizgiler birleştirilerek kare ızgara benzeri bir görünüm elde edilir.

.plaid-pattern {
  background-color: #fff;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 20px,
      rgba(102, 126, 234, 0.3) 20px,
      rgba(102, 126, 234, 0.3) 21px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 20px,
      rgba(118, 75, 162, 0.3) 20px,
      rgba(118, 75, 162, 0.3) 21px
    );
}

Grid (Izgara) Deseni

İnce çizgili bir ızgara, iki repeating-linear-gradient (biri yatay, biri dikey) ile oluşturulabilir.

.grid-pattern {
  background-color: #fff;
  background-image:
    linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size: 20px 20px;
}

Renk ve Opaklık

Tüm desenlerde renkleri rgba veya hsla ile yarı saydam yaparak arka plan rengiyle uyum sağlayabilirsiniz. Tema veya dark mode için CSS değişkenleri kullanılabilir.

:root {
  --pattern-color: rgba(102, 126, 234, 0.2);
  --pattern-size: 24px;
}
.dots-theme {
  background-color: var(--bg);
  background-image: radial-gradient(
    circle,
    var(--pattern-color) 2px,
    transparent 2px
  );
  background-size: var(--pattern-size) var(--pattern-size);
}

Honeycomb (Petek) Deseni

Altıgen petek deseni için linear-gradient ve conic-gradient kombinasyonu kullanılabilir. Daha basit bir yaklaşım, eşkenar üçgen tabanlı repeating gradient ile yarım petek hissi vermektir. Tam honeycomb için SVG tercih edilebilir; ancak hafif bir petek illüzyonu saf CSS ile mümkündür.

Performans

Gradient desenler hafif ve hızlıdır; ekstra görsel dosyası gerektirmez. Ancak çok katmanlı veya çok büyük alanlarda render maliyeti artabilir. Gereksiz katmanları azaltın ve will-change kullanmaktan kaçının. Chevron gibi dört katmanlı desenler makul performans sunar. Repeating Gradient rehberimizde tekrarlayan desenlerin detaylarını inceleyebilirsiniz.

Özet

CSS gradient ile çizgili, noktalı, chevron ve plaid desenleri ek görsel olmadan oluşturulabilir. repeating-linear-gradient çizgiler için, radial-gradient noktalar için idealdir. Gradient Oluşturucu ile renklerinizi seçip desenlerde test edebilirsiniz. İlgili rehberler: Repeating Gradient, CSS Gradient Nedir? ve CSS Gradient Overlay.