Pembuat Pola Latar Belakang CSS
Hasilkan pola latar belakang yang mulus dan berulang dalam CSS murni — titik, kisi, garis, papan catur, gelombang, dan kubus 3D — dengan warna, skala, dan opasitas Anda sendiri. Salin aturan CSS yang sudah jadi dan potongan HTML, tidak perlu file gambar.
Input
Warna
Turunkan ini menjadi 10-20% untuk tekstur halus di belakang teks.
Geometri
Ukuran satu ubin yang berulang, dalam piksel.
Ketebalan garis, atau jari-jari titik.
Keluaran
Aturan yang dihasilkan dibatasi pada kelas ini, sehingga tidak akan bertabrakan dengan gaya Anda sendiri.
Output
Pola Anda akan muncul di sini.
CSS yang dihasilkan secara nyata, dirender dalam Shadow DOM yang terisolasi — persis seperti yang Anda salin.
min-height inline hanya ada untuk memberikan ukuran pada kotak demo kosong — lepaskan di tata letak Anda sendiri.
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-background-pattern-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"pattern": "dots",
"color": "#6366f1",
"bgColor": "#ffffff",
"opacity": "100",
"size": "32",
"weight": "3",
"className": "io-pattern"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `css-background-pattern-generator` tool (CSS Background Pattern Generator) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/css-background-pattern-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Pembuat Pola Latar Belakang CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.
| Biaya per panggilan API/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Pola latar belakang yang berulang yang terbuat dari gradient CSS tidak ada beratnya. Tidak ada file gambar untuk disimpan, tidak ada permintaan HTTP tambahan, tidak ada tepi yang buram ketika seseorang membuka halaman Anda di layar retina, dan warna berubah dengan mengedit dua nilai heksadesimal alih-alih mengekspor ulang PNG. Pembuat ini membangun CSS untuk Anda: pilih pola, atur warna, skala dan opasitas, dan salin aturan yang selesai.
Semuanya berjalan di browser Anda — tidak ada yang Anda ketik yang diunggah ke mana pun.
Cara menggunakannya
- Pilih pola. Lima belas keluarga tersedia: titik polka, titik bergeser, kisi, kertas grafik, garis horizontal / vertikal / diagonal, salib, garis isometrik, papan catur, berlian, segitiga, zigzag, gelombang, dan kubus 3D.
- Atur warna. "Warna pola" melukis bentuk, "Warna latar belakang" mengisinya di belakang.
- Sesuaikan geometri. Ukuran pola adalah lebar satu ubin yang berulang dalam piksel; Ketebalan garis adalah seberapa tebal garis (atau seberapa besar titik). Ketebalan garis disembunyikan untuk pola yang geometrinya murni proporsional — papan catur tidak memiliki garis untuk dipertahankan.
- Turunkan opasitas. Ini adalah pengaturan yang paling banyak diinginkan orang dan yang tidak dimiliki sebagian besar pembuat. Pada 100% pola bersaing dengan konten Anda; pada 10–20% dibaca sebagai tekstur.
- Salin CSS dan tempel ke lembar gaya Anda. Potongan HTML di sebelahnya menunjukkan markup yang diharapkan oleh aturan.
Pengaturan
- Pola — keluarga geometri. Setiap satu adalah
background-imagemurni yang dibangun darilinear-gradient,repeating-linear-gradient, atauradial-gradient. - Warna pola / Warna latar belakang — nilai heksadesimal.
background-colorberada di bawah layer gradient, jadi warna pola adalah apa yang Anda lihat di atas. - Opasitas pola — di bawah 100% warna pola dipancarkan sebagai
rgba()sehingga latar belakang bersinar melaluinya. - Ukuran pola — 4px hingga 160px. Nilai kecil memberikan tekstur halus, nilai besar memberikan blok grafik yang berani.
- Ketebalan garis — dibatasi pada setengah ukuran ubin, karena garis yang lebih tebal dari itu mengalirkan ubin menjadi blok solid.
- Nama kelas — aturan dibatasi pada kelas ini, sehingga tidak dapat bertabrakan dengan apa pun di lembar gaya Anda.
Mengapa CSS memiliki beberapa layer background-image?
Kebanyakan pola ini tidak dapat ditarik dengan satu gradient. Kisi adalah keluarga garis vertikal ditambah garis horizontal; papan catur adalah dua gradient diagonal yang bergeser; kubus isometrik membutuhkan enam layer untuk memberikan setiap wajah nuansa yang berbeda. CSS melukisnya dalam urutan yang ditulis, layer pertama di atas, dan background-size / background-position selaras dengan layer tersebut satu per satu. Terlihat bertele-tele, tetapi itu adalah satu properti — Anda dapat dengan aman menempel seluruh blok apa adanya.
Mengapa background-size hilang pada pola garis?
Keluarga garis, salib dan isometrik menggunakan repeating-linear-gradient, yang membawa periode pengulangan sendiri dalam stop gradient. Menambahkan background-size di sana tidak akan mengubah apa pun, jadi alat tidak memancarkannya.
Apakah pola-pola ini akan bekerja di browser yang lebih lama?
Setiap pola menggunakan gradient CSS, didukung di mana-mana sejak sekitar 2012. Keluarga garis menggunakan stop warna multi-posisi (color 0 6px), yang memerlukan browser dari 2019 atau lebih baru — setiap versi Chrome, Firefox, Safari, dan Edge saat ini menanganinya.
Bagaimana jika saya ingin pola di belakang teks?
Atur opasitas ke 10–20% dan pilih ukuran pola yang kecil. Pola yang sibuk pada kekuatan penuh membuat salinan badan sulit dibaca; pola yang sama pada 15% dibaca sebagai tekstur kertas dan tetap tidak apa-apa.
Alat terkait
Butuh gradient daripada pola? Pembuat Gradient CSS membangun gradient linear dan radial secara visual. Untuk bentuk berulang yang dipancarkan sebagai file SVG nyata alih-alih CSS, gunakan Pembuat Pola SVG, dan untuk latar belakang blur lembut, Pembuat Blob Aurora CSS.