Tasarım / CSS
CSS Desen Oluşturucu (Çizgiler, Noktalar, Izgara, Dama Deseni)
Yalnızca CSS gradyanlarıyla tekrarlanan arka plan desenleri oluşturun: çizgiler, çapraz çizgiler, ızgara çizgileri, puantiyeli noktalar, dama deseni ve zikzak. İki renginizi, boyutu ve çizgi genişliğini belirleyip CSS'yi kopyalayın.
CSS Desen Oluşturucu (Çizgiler, Noktalar, Izgara, Dama Deseni): Her desen, seçtiğiniz boyutta tekrarlanan bir veya iki CSS gradyanından oluşur: çizgiler için repeating-linear-gradient, ızgara için kesişen iki linear-gradient, noktalar için radial-gradient ve dama deseni için repeating-conic-gradient kullanılır. Görüntü dosyası olmadığından desen her yakınlaştırma düzeyinde keskin kalır ve yüklenmesi için hiçbir maliyet oluşturmaz. Sunucuya hiçbir dosya yüklenmeden tarayıcınızda %100 yerel olarak çalışır.
- Kategori
- Geliştirici araçları
- Çalıştırma sayısı
- Tarayıcınızda
- Maliyet
- Ücretsiz · kayıt gerekmez
- Kullanılabilirlik
- Kullanıma hazır
Tamamen tarayıcınızda çalışır
CSS
.pattern {
background-color: #f2faed;
background-image: repeating-linear-gradient(45deg, #63c42d 0 6px, transparent 6px 24px);
}Her desen yalnızca CSS gradyanlarıyla çizilir; bu nedenle indirilecek bir görsel yoktur, her yakınlaştırma düzeyinde keskinliğini korur ve renkleri stil sayfasından değiştirilebilir. Metnin arkasındaki desenleri sade tutun: iki renk arasındaki düşük kontrast, metnin okunabilir kalmasını sağlar.
Damalı desen nasıl çizilir
repeating-conic-gradient(#000 0 25%, transparent 0 50%), her karonun merkezinin çevresindeki dönüşün ilk ve üçüncü çeyreklerini boyar; böylece karo başına iki çapraz kare oluşur. background-size, karoyu kare boyutunun iki katına ayarlar.
Desenleri birleştirme
Arka plan görselleri üst üste eklenir: CSS gradient oluşturucudan bir gradient'i desenden sonra virgülle ayırarak listeleyin; desen, gradient'in üzerinde yer alır.
Nasıl kullanılır?
- Bir desen seçin.
- İki rengi, tekrar boyutunu ve çizgi genişliğini veya nokta boyutunu belirleyin.
- CSS'yi kopyalayın.
Gizlilik ve sınırlamalar
Her şey tarayıcınızda çalışır.
İlgili araçlar
Sık sorulan sorular
Desenler her tarayıcıda çalışır mı?
Evet: dama deseni için kullanılan conic gradient de dahil olmak üzere, güncel tüm tarayıcılar bu gradyanları destekler.
Bir deseni metnin arkasına nasıl yerleştirebilirim?
Desenin göze batmaması ve metnin yeterli kontrastı koruması için birbirine yakın iki renk seçin.
Çizgilerin açısını değiştirebilir miyim?
Evet: kopyalanan CSS içindeki repeating-linear-gradient bölümünde açıyı düzenleyin; örneğin 45deg yerine 60deg kullanın.
Ücretsiz araç · tarayıcınızda kez çalıştırma · hesap gerekmez