Desen Arka Plan Oluşturucu

Saf CSS, görüntü dosyası yok

Buradaki her desen, düz bir background-color üzerine CSS gradyanlarıyla çizilir. Ayrı bir görsel barındırmanız veya bu görsel için ek bir HTTP isteği yapmanız gerekmez. Örneğin bir nokta deseni şöyle görünür:

.hero {
  background-color: #1F2937;
  background-image: radial-gradient(#FFFFFF 1px, transparent 1px);
  background-size: 20px 20px;
}

CSS, motifi arka plan yüzeyi boyunca tekrarlar. Aralık ayarı desenin yoğunluğunu değiştirir; her çizginin kalınlığını veya her noktanın boyutunu değiştirmez. Bazı tarayıcı yakınlaştırma oranlarında ya da kesirli cihaz piksellerinde tekrar sınırlarında çok ince izler görülebilir.

Her motif neyden oluşur

Renk ve kontrast ipuçları

• Arka planlar için kontrastı düşük tutun. Arka plan rengine yakın bir desen rengi daha sade bir görünüm sağlar. Yüksek kontrast, asıl içeriğin önüne geçebilir.
• Markanızla uyum sağlayın. Düz gri yerine markanızın renklerinden birini desen rengi olarak kullanabilirsiniz.
• Karanlık mod. Koyu bir arka plan rengine ve biraz daha açık bir desen rengine geçin. Tam kontrastlı desenler karanlık yüzeylerde gürültülü görünür.
• Metni iki rengin üzerinde de kontrol edin. Arka plan renklerinin birbirine yakın olması, metinle yeterli kontrast sağlandığı anlamına gelmez. Metin rengini hem zemin hem de desen rengi üzerinde sınayın. Bu araç WCAG uygunluğunu denetlemez.

Nerede kullanılır

• Görsel kullanmadan doku eklemek istediğiniz üst bölüm ve içerik bölümü arka planları.
• Hafif bir ızgara veya nokta deseniyle ayrım sağlanan kartlar ve paneller.
• Dama deseninin tanıdık bir görsel işaret sunduğu boş durumlar ve yer tutucular.
• Milimetrik kâğıt veya çapraz tarama hissi gerektiren baskı tarzı düzenler ve slaytlar.

Çıktı yalnızca CSS olduğundan ayrı bir görsel isteği gerekmez. Kodu daha sonra tarayıcınızın geliştirici araçlarında düzenleyebilirsiniz.