Generator Latar Pola CSS

Kebanyakan alat "pembuat pola" diam-diam menggunakan ulang formula repeating-linear-gradient yang sama untuk setiap opsi dan hanya mengganti angkanya. Yang ini tidak: masing-masing dari enam jenis pola di sini dibangun dengan teknik CSS spesifik yang benar-benar menghasilkan bentuk itu. Garis menggunakan satu repeating-linear-gradient dengan dua pita warna. Titik menggunakan satu radial-gradient yang di-tile murni melalui background-size — trik titik CSS klasik — bukan repeating-radial-gradient, yang tidak bisa men-tile titik bundar dengan rapi pada kisi persegi. Kotak-kotak menggunakan formula conic-gradient empat kuadran asli: gradien kerucut yang dipusatkan di ubin persegi secara alami terbagi menjadi empat persegi kuadran pada batas 90 derajat, dan mengganti dua warna secara bergantian di setiap kuadran akan membentuk kotak-kotak asli, bukan aproksimasi.

Kisi dan crosshatch diagonal sama-sama melapisi dua repeating-linear-gradients sebagai entri background-image terpisah alih-alih memalsukan arah kedua dengan trik border. Kisi menggabungkan gradien berulang "ke kanan" dan "ke bawah" untuk garis aturan horizontal dan vertikal yang tajam. Crosshatch melapisi gradien berulang +45deg dan -45deg untuk anyaman diagonal ala basketweave — perlu ditegaskan: ini adalah crosshatch yang jujur, bukan geometri herringbone sejati, dan alat ini melabelinya demikian tanpa mengklaim berlebihan. Segitiga menggunakan kembali teknik conic-gradient empat irisan kotak-kotak tetapi memulai gradien dengan rotasi 45 derajat, yang menggeser batas irisan dari titik tengah sisi ubin ke sudutnya dan mengubah empat irisan yang sama menjadi empat segitiga sudut-ke-sudut, bukan empat persegi kuadran.

Setiap jenis pola hanya menampilkan kontrol yang benar-benar berlaku padanya — penggeser sudut muncul untuk garis, jari-jari dan jarak titik muncul untuk titik, ketebalan garis muncul untuk kisi dan crosshatch — dan kotak pratinjau besar akan dimuat ulang pada setiap perubahan sehingga Anda bisa melihat beberapa pengulangan penuh sebelum menentukan nilai. Alihkan mode output ke SVG dan pola yang sama muncul kembali sebagai elemen <pattern> yang dibangun dari primitif rect, circle, path, atau polygon biasa, siap ditempel ke dalam <defs> dokumen SVG mana pun, dengan unduhan satu klik untuk file .svg mandiri.

Semuanya berjalan secara lokal di browser Anda: tanpa unggah gambar, tanpa bolak-balik server, tanpa akun. Untuk isian solid atau gradien tanpa pengulangan, generator gradien CSS di situs ini adalah alat yang tepat; yang ini khusus untuk latar geometris yang dapat di-tile yang dibuat dari nol aset gambar.