Generator Latar Belakang Pola CSS

Kebanyakan alat "pembuat pola" secara diam-diam menggunakan kembali rumus gradien linier berulang yang sama untuk setiap opsi dan hanya mengubah angkanya. Yang ini tidak: masing-masing dari enam tipe pola di sini dibangun dari teknik CSS spesifik yang benar-benar menghasilkan bentuk tersebut. Garis menggunakan gradien linier berulang tunggal dengan dua pita warna. Titik menggunakan satu ubin gradien radial murni melalui ukuran latar belakang — trik titik CSS klasik — daripada gradien radial berulang, yang tidak dapat menyusun titik melingkar dengan rapi pada kotak persegi panjang. Kotak-kotak menggunakan rumus gradien kerucut empat kuadran yang sebenarnya: gradien berbentuk kerucut yang berpusat pada ubin persegi secara alami terbagi menjadi empat kotak kuadran pada batas 90 derajat, dan mengganti dua warna di seluruh ubin kuadran tersebut menjadi kotak-kotak asli, bukan perkiraan.

Grid dan garis silang diagonal keduanya melapisi dua gradien linier berulang sebagai entri gambar latar belakang yang terpisah daripada memalsukan arah kedua dengan trik batas. Grid menggabungkan gradien berulang "ke kanan" dan "ke bawah" untuk garis aturan horizontal dan vertikal yang tajam. Crosshatch melapisi gradien berulang +45deg dan -45deg untuk tenunan diagonal gaya basketweave — patut diperhatikan: ini adalah crosshatch yang jujur, bukan geometri herringbone yang sebenarnya, dan alat ini memberi label seperti itu daripada mengklaim secara berlebihan. Segitiga menggunakan kembali teknik gradien kerucut empat baji papan catur tetapi memulai gradien dengan diputar 45 derajat, yang menggeser batas baji dari titik tengah tepi ubin ke sudutnya dan mengubah empat baji yang sama menjadi empat segitiga sudut-ke-sudut, bukan empat kotak kuadran.

Setiap jenis pola hanya memperlihatkan kontrol yang benar-benar diterapkan padanya — penggeser sudut muncul untuk garis, radius titik, dan spasi muncul untuk titik, ketebalan garis muncul untuk kisi dan garis silang — dan kotak pratinjau ubin besar dicat ulang pada setiap perubahan sehingga Anda dapat melihat beberapa pengulangan penuh sebelum berkomitmen pada suatu nilai. Balikkan mode keluaran ke SVG dan pola yang sama akan muncul kembali sebagai elemen <pattern> yang dibuat dari primitif persegi panjang, lingkaran, jalur, atau poligon, siap untuk ditempelkan ke dalam <defs> dokumen SVG mana pun, dengan unduhan sekali klik untuk file .svg mandiri.

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