CSS Arka Plan Deseni Oluşturucu

Bu araç, yalnızca CSS gradyanları kullanarak tekrarlanan arka plan desenleri oluşturur — hiçbir görsel dosyasına gerek yoktur. Puantiye, çapraz çizgiler, dama tahtası veya ızgara çizgileri seçin, renkleri ve aralıkları ayarlayın ve background-image CSS kodunu doğrudan stil sayfanıza kopyalayın.

Bu Araç Nedir?

CSS, gradyanları — radial-gradient() ve linear-gradient() — background-image olarak kullanarak, elemandan daha küçük bir background-size ile birleştirerek hiçbir görsel dosyası kullanmadan tekrarlanan desenler çizebilir; böylece gradyan döşenir ve tekrarlanır. Puantiye desenleri tekrarlayan bir radial-gradient kullanır, çizgiler ve dama tahtaları tekrarlayan veya katmanlı linear-gradient() kullanır, ızgara çizgileri ise iki üst üste binen linear-gradient() çizgisi kullanır.

Bu araç bu gradyan bildirimlerini sizin için oluşturur. Bir desen türü seçin, desen rengini, arka plan rengini ve aralığı ayarlayın ve canlı önizlemenin güncellendiğini görün — ardından tam background-image ve background-size CSS kodunu kopyalayın.

Kaynak: CSS Images Module Level 3, W3C — bu desenlerin oluşturulduğu repeating-linear-gradient() ve repeating-radial-gradient() işlevlerini tanımlar.

Neden Kullanmalısınız?

Görsel dosyası yok, HTTP isteği yok — desen tamamen CSS'tir ve retina/yüksek DPI ekranlar dahil olmak üzere her çözünürlükte anında render edilir.
Gradyan söz dizimini elle yazmadan veya döşeme matematiğini hesaplamadan renk ve aralığı tamamen ayarlanabilir.
Canlı önizleme, herhangi bir şey kopyalamadan önce tam olarak tekrarlanan deseni gösterir.
Rastgele görüntü yerine vektör matematiği olduğu için sorunsuz ölçeklenir — öğe yeniden boyutlandırıldığında bulanıklaşma olmaz.
Tamamen tarayıcınızda çalışır — yaptığınız hiçbir ayar hiçbir yere yüklenmez.
Ücretsiz, kayıt gerektirmez, mobil cihazlarda çalışır.

Nasıl Kullanılır

Bir desen türü seçin: puantiye, çapraz çizgiler, dama tahtası veya ızgara çizgileri.
Desen rengini ve desen şekillerinin arasında/arkasında görünen arka plan rengini seçin.
Nokta, çizgi veya ızgara hücrelerini büyütmek veya küçültmek için boyut kaydırıcısını ayarlayın — bu aynı zamanda desenin ne kadar sık tekrarlandığını da kontrol eder.
Oluşturulan CSS kodunu kopyalayın ve herhangi bir öğenin background-image (ve gösterildiği yerlerde background-size/background-position) olarak yapıştırın.

Örnek

Giriş

Desen: puantiye · Renk: mavi · Arka plan: beyaz · Boyut: 24px

Çıkış

background-color: #ffffff;
background-image: radial-gradient(rgba(59, 130, 246, 1) 3px, transparent 3px);
background-size: 24px 24px;
background-position: 0 0;

Genellikle ince bir bölüm arka planı veya kart dokusu olarak kullanılan klasik açık puantiye deseni.

Her desen nasıl oluşturulur

Puantiye: bir radial-gradient() küçük, dolu bir daire çizer, ardından background-size bunun döşenmiş bir noktalar ızgarası olarak tekrarlanmasını sağlar.
Çapraz çizgiler: 45 derecelik açıda bir repeating-linear-gradient(), sabit bir aralıkla desen rengi ile arka plan rengi arasında geçiş yapar.
Dama tahtası: birbirine göre yarım döşeme kaydırılmış iki üst üste binen 45 derecelik linear-gradient() katmanı, dönüşümlü açık/koyu kareler oluşturur.
Izgara çizgileri: biri yatay, biri dikey iki ince linear-gradient() çizgisi, seçilen aralıkta döşenerek milimetrik kağıda benzer bir ızgara oluşturur.

Görsel dosyaları yerine ne zaman CSS desenleri kullanılmalı

Bir CSS gradyan deseninin dosya boyutu yoktur ve HTTP isteği gerektirmez, bu yüzden anında yüklenir ve rastgele bir PNG arka plan döşemesinin aksine yüksek DPI ekranlarda asla bulanık görünmez. Metnin arkasındaki ince dokular, bölüm ayırıcıları, boş durum illüstrasyonları veya yer tutucu kartlar için idealdir. Karmaşık illüstrasyonlu veya fotografik desenler için gerçek bir görsel hâlâ doğru araçtır — CSS gradyanları buradaki gibi basit, geometrik, tekrarlanan şekiller için en uygun olanıdır.

Diğer CSS efektleriyle birlikte kullanma

Desenler, glassmorphism kartlarının arka planı olarak iyi çalışır, çünkü bulanıklığın görünür olması için arkasında görsel dokuya sahip bir şeye ihtiyacı vardır. Ayrıca kapsayıcı öğedeki yuvarlatılmış köşelerle de doğal bir şekilde uyum sağlar.

→ CSS Glassmorphism Oluşturucu · Kenar Yarıçapı Oluşturucu

Sıkça Sorulan Sorular

Bu desenler görsel dosyası gerektiriyor mu?

Hayır. Buradaki her desen, bir background-image olarak yalnızca CSS gradyanlarıyla oluşturulur — hiçbir PNG, SVG veya başka bir dosya yoktur, bu yüzden ek bir HTTP isteği veya yüksek çözünürlüklü ekranlarda bulanıklaşma riski bulunmaz.

Desenin boyutunu değiştirebilir miyim?

Evet — boyut kaydırıcısı, desenin bir tekrarlanan döşemesinin ne kadar büyük olduğunu belirleyen background-size'ı kontrol eder. Daha küçük bir boyut, noktaları, çizgileri veya ızgara hücrelerini birbirine yaklaştırır; daha büyük bir boyut ise onları yayar.

Dama tahtası deseni neden iki gradyan kullanıyor?

Tek bir linear-gradient() yalnızca tek bir yön boyunca renkleri değiştirebilir. Birbirine göre yarım döşeme kaydırılmış iki adet 45 derecelik gradyanı katmanlamak, dama tahtasının dönüşümlü açık/koyu karelerini oluşturan şeydir — bu, yalnızca CSS ile dama tahtası oluşturmak için standart tekniktir.

Bu desen retina/yüksek DPI ekranlarda keskin görünecek mi?

Evet. Desen bir bit eşlem görüntüsü değil matematiksel bir gradyan olduğu için, ekranın ihtiyaç duyduğu çözünürlükte, herhangi bir büyütme veya bulanıklaşma olmadan render edilir — yüksek piksel yoğunluğunda gerilen veya tekrarlanan küçük bir rastgele görsel döşemenin aksine.

Bu desenleri tam sayfa arka planı olarak kullanabilir miyim?

Evet — oluşturulan background-image, background-size ve (varsa) background-position değerlerini gövdeye veya herhangi bir tam genişlikteki kapsayıcı öğeye uygulayın. Kontrastı aklınızda bulundurun: gövde metninin arkasındaki yoğun, yüksek kontrastlı bir desen okunabilirliği zedeleyebilir, bu yüzden büyük arka plan alanları için daha açık/ince ayarlar genellikle daha iyi sonuç verir.