CSS Arka Plan Deseni

Cihazında canlı önizlemeli, tekrarlayan CSS arka plan desenleri oluştur. Nokta, ızgara, çizgi, damalı veya artı seç; boyut, renk ve opaklığı ayarla, parçacığı kopyala.

GizliTarayıcıdaAnındaLimitsiz

Desen boyutu (24px)

Desen opaklığı (35%)

Desen rengi

Arka plan rengi

Önizleme

Panel deseni tam güçte gösterir. Yoğunluk ve kontrast doğru görününce CSS’i kopyala.

HTML ve CSS

/* HTML */
<div class="easy24-pattern" style="min-height: 240px;"></div>

/* CSS */
.easy24-pattern {
  background-color: #f7f8fb;
  background-image: radial-gradient(#0f6e6859 3px, transparent 4px);
  background-size: 24px 24px;
  background-position: center;
}

Yalnızca HTML

<div class="easy24-pattern" style="min-height: 240px;"></div>

Sınıfı herhangi bir blok elemente yapıştır. Koyu sayfalarda opaklığı artır veya desen rengini açarak motifin okunaklı kalmasını sağla.

Nasıl çalışır

Desen stilini seç

Bir hazır ayarla başla veya nokta, ızgara, çizgi, damalı ya da artı seç. Her stil farklı bir gradient tarifi kullanır; renk ve boyut kontrolleri ortaktır.

Yoğunluk ve kontrastı ayarla

Boyut ve opaklığı motif doğru hissedilene kadar kaydır, desen ve arka plan renklerini seç, çizgi stilinde açıyı düzenle. Önizleme düzenlerken güncellenir.

Parçacığı kopyala veya indir

Birleşik HTML ve CSS’i kopyala, yalnızca HTML’i al veya pattern.css indir. Her şey bu sekmede çalışır.

CSS Arka Plan Deseni nedir?

CSS Arka Plan Deseni, parçacık kütüphanelerinde gezinmeden hafif tekrarlayan yüzeyler tasarlamanı kolaylaştırır. Yaygın motifler için küçük bir HTML ve CSS çifti verir; canlı kontrast kontrolüyle desen açık veya koyu sayfalarda okunaklı kalır.

Neden bu araç

Saf CSS gradient’leriyle beş tekrarlayan desen stili üretir.
Boyut, opaklık, desen rengi ve arka plan rengini canlı önizlemeyle ayarlamanı sağlar.
Çizgi stili açıkken çizgi açısını değiştirmeni sağlar.
Beş hazır ayarla hızlı başlamanı sağlar.
HTML ve CSS’i birlikte kopyalamanı veya yalnızca HTML’i almanı sağlar.
İstediğin kadar kullanabilirsin. Ücretsiz planda günlük kullanım limiti yoktur.

Sorular

CSS Arka Plan Deseni ne yapar?

Nokta, ızgara, çizgi, damalı ve artı gibi tekrarlayan arka planlar için kopyalanabilir CSS üretir. Görünümü tarayıcıda önizler ve parçacığı projene yapıştırırsın.

Görsel veya JavaScript gerekir mi?

Hayır. Desenler yalnızca CSS gradient’tir. Arka plan için görsel varlık veya çalışma zamanı JavaScript’i gerekmez.

Desen her elementte döşenir mi?

Evet. Sınıfı bir div, section veya body’ye uygula. Arka plan alanının görünmesi için elemente yükseklik veya içerik ver.

SVG Pattern’den farkı nedir?

Bu araç CSS arka planları üretir. SVG Pattern ölçeklenebilir SVG döşeme grafikleri kurar. Hızlı arayüz yüzeyleri için CSS’i, vektör dışa aktarma veya daha karmaşık motifler için SVG’yi kullan.

Eski tarayıcılarda bozulur mu?

Modern tarayıcılar bu gradient’leri iyi destekler. Çok eski tarayıcılar yalnızca düz arka plan rengine düşebilir.

Günlük limit var mı?

Hayır. Bu aracın ücretsiz planda günlük kullanım limiti yoktur.

Easy24 işine yaradıysa kahve ısmarla

Araçlar ücretsiz kalır. Teşekkür etmek istersen tek seferlik bağış yapabilirsin.

Kahve ısmarla

Benzer Geliştirici araçları

Tümünü gör

JSON Biçimlendirici

Geliştirici

JSON'u tarayıcıda güzelleştir, küçült, doğrula ve anahtarları sırala. 2 veya 4 boşluk girinti, dosya içe aktarma ve indirme.

Aç

Meta Etiket Üretici

Geliştirici

SEO başlık, açıklama, Open Graph, Twitter Card ve canonical etiketlerini canlı sosyal önizleme ile oluştur. Tarayıcıda çalışır.

Aç

CSS Gradyan Oluşturucu

Geliştirici

Doğrusal ve radyal CSS gradyanları tasarla; üç renk durağına kadar. Canlı önizleme, hazır şablonlar, hex girişi, kopyala veya indir.

Aç