Generator Pola CSS

Buat pola latar CSS murni – titik, polkadot, garis-garis, papan catur, kisi, zigzag, dan kisi silang – dengan warna, ukuran ubin, dan ketebalan. Tanpa gambar.

Pengaturan pola

Pola

Pratinjau

Kode CSS
background-color: #ffffff;
background-image: radial-gradient(#6366f1 2px, transparent 2px);
background-size: 20px 20px;

Alat Terkait

Lihat Semua
Generator CSS Box Shadow Generator CSS Gradient Generator CSS Flexbox Generator CSS Grid Generator Border Radius Generator Glassmorphism Generator Neumorphism Generator Text Shadow

Apa itu Generator Pola CSS?

Menghasilkan pola latar berulang hanya dengan gradien CSS, sehingga tidak diperlukan file gambar. Pilih pola, dua warna, ukuran ubin, serta ketebalan garis atau titik, lalu salin deklarasi background yang dihasilkan.

Cara menggunakan Generator Pola CSS

  1. Pilih Pola: Titik-titik, Polkadot, Garis-garis, Papan catur, Kisi, Zigzag, atau Kisi silang.
  2. Atur Warna pola dan Warna latar.
  3. Sesuaikan Ukuran ubin dan ketebalannya (radius titik, lebar garis-garis, atau tebal garis) dan, untuk garis-garis, Sudutnya.
  4. Periksa pratinjaunya.
  5. Salin kode CSS-nya.

Contoh

Masukan
Checkerboard, tile 40px, pattern #000000 on #ffffff
Keluaran
background-color: #ffffff;
background-image: repeating-conic-gradient(#000000 0% 25%, transparent 0% 50%);
background-size: 40px 40px;

Kapan menggunakan Generator Pola CSS

Gunakan pola CSS untuk latar halaman yang halus, placeholder, efek kertas grafik, dan section dekoratif; pola ini berskala sempurna dan tidak membutuhkan request HTTP. Untuk karya seni berulang yang kompleks atau ilustratif, ubin SVG lebih fleksibel.

Cara kerja Generator Pola CSS

Setiap pola adalah background-color ditambah satu atau beberapa gradien yang diulang oleh background-size. Titik memakai radial-gradient(color r, transparent r); polkadot menambahkan lapisan kedua yang digeser lewat background-position. Garis-garis memakai repeating-linear-gradient dengan titik warna tegas; papan catur memakai repeating-conic-gradient(color 0% 25%, transparent 0% 50%); kisi menggabungkan gradien linear horizontal dan vertikal; zigzag dibangun dari empat segitiga 45°. Ketebalan dibatasi hingga ukuran ubin.

Kasus Penggunaan Umum

  • Latar kertas grafik untuk editor dan diagram
  • Latar hero bertitik yang halus
  • Bilah peringatan atau progres bergaris
  • Papan catur transparansi di belakang gambar
  • Latar section zigzag bergaya retro

Pertanyaan Umum

Apakah pola ini berfungsi di semua browser?

Ya, di browser saat ini. Papan catur bergantung pada conic gradient, yang didukung semua browser utama sejak 2020.

Bisakah saya memakai latar transparan?

Bisa, masukkan transparent atau warna rgba()/oklch() dengan alpha sebagai Warna latar.

Mengapa memakai CSS alih-alih gambar?

Pola CSS tidak bergantung pada resolusi, sangat kecil, dan mudah diwarnai ulang dengan variabel, tanpa file tambahan yang harus diunduh.

Jelajahi kategori lainnya

CRC
Algoritma Cyclic Redundancy Check untuk deteksi kesalahan
MD
Algoritma Message Digest (MD2, MD4, MD5)
SHA-1
Secure Hash Algorithm 1 - fungsi hash 160-bit
SHA-2
Keluarga Secure Hash Algorithm 2 (SHA-224, SHA-256, SHA-384, SHA-512)