Lewati ke konten
ID

Generator pola CSS

Buat pola latar dengan CSS murni: titik, kisi, garis, garis diagonal, kotak-kotak, zigzag, silang, belah ketupat. Warna dan ukuran bisa diatur, tanpa gambar.

  • Gratis
  • Tanpa daftar
  • Tanpa unggah file
  • Windows, Mac, Android, iPhone

Memuat alat…

Tentang alat ini

Hiasi latar Anda dengan pola geometris CSS murni: polkadot, kisi milimeter, garis buku tulis, garis diagonal, kotak-kotak, zigzag, silang, dan belah ketupat. Atur dua warna, ukuran, dan ketebalan, lalu salin kodenya: tanpa gambar yang perlu di-hosting.

Kapan menggunakannya

Latar bagian

Kisi yang sangat terang atau titik-titik halus memberi karakter pada latar tanpa mengganggu keterbacaan.

Area lepas dan keadaan kosong

Garis diagonal menandai area seret dan lepas atau slot kosong.

Mockup dan presentasi

Pola ringan mencegah latar putih yang terlalu kosong di mockup.

Cara menggunakan

  1. Pilih pola.
  2. Atur warna, ukuran, dan ketebalan.
  3. Salin kode CSS latar.

Cara kerjanya

Setiap pola terdiri dari satu atau beberapa gradien yang warnanya berganti seketika (tanpa transisi), sehingga menggambar bentuk yang tegas. background-size menentukan ukuran ubin yang berulang.

Pratinjau menerapkan kode yang dihasilkan persis; thumbnail pilihan dirender dengan warna Anda.

Tips untuk hasil terbaik

  • Jaga kontras rendah antara dua warna untuk latar di belakang teks.
  • Ukuran 16 hingga 32 px cocok untuk sebagian besar latar.
  • Hindari pola yang sangat rapat dan kontras: bisa menimbulkan efek moiré.
  • Gabungkan pola dengan gradien transparan untuk memudarkannya.

Masalah umum dan solusinya

Pola berkedip saat digulir

Pola halus dan kontras tinggi menimbulkan moiré: perbesar ukuran atau turunkan kontras.

Garis tampak buram

Dengan ketebalan desimal atau zoom, tepi menjadi lembut. Gunakan ketebalan piksel bulat.

Pola tidak menutupi seluruh blok

Pastikan elemen punya tinggi: blok kosong dengan tinggi 0 tidak menampilkan apa pun.

Pertanyaan umum

Mengapa pola CSS, bukan gambar?

Tidak perlu memuat file, tetap tajam di semua layar, dan bisa diubah dengan mengedit dua warna di kode.

Bagaimana pola ini dibuat?

Dengan gradien CSS (linear-gradient, radial-gradient, conic-gradient) dengan batas warna tegas, diulang dengan background-size.

Bisakah digabungkan dengan warna latar?

Ya, warna latar termasuk dalam kode. Pola juga bisa diletakkan di atas gambar dengan menambah lapisan pada background-image.

Apakah berfungsi di semua browser?

Ya, di semua browser terbaru; kotak-kotak memakai conic-gradient, yang didukung di mana-mana sejak 2020.

Pencarian terkait

Masih bermasalah?

Tanyakan di forum: kategori, alat, data perangkat, dan hasil tes akan diisi otomatis.