Desain / CSS

Generator Pola CSS (Garis, Titik, Kisi, Papan Catur)

Buat pola latar berulang hanya dari gradien CSS: garis, garis diagonal, garis kisi, titik polkadot, papan catur, dan zigzag, dengan dua warna, ukuran, serta lebar garis pilihan Anda, lalu salin CSS-nya.

Generator Pola CSS (Garis, Titik, Kisi, Papan Catur): Setiap pola terdiri dari satu atau dua gradien CSS yang berulang pada ukuran pilihan Anda: repeating-linear-gradient untuk garis, dua linear-gradient yang saling menyilang untuk kisi, radial-gradient untuk titik, dan repeating-conic-gradient untuk papan catur. Tidak ada file gambar, sehingga pola tetap tajam pada tingkat zoom apa pun dan tidak menambah biaya pemuatan. Berjalan 100% lokal di browser Anda tanpa upload file ke server.

Kategori
Tools developer
Dijalankan
Di browser Anda
Biaya
Gratis · tanpa daftar
Ketersediaan
Siap digunakan
Generator pola CSSPemrosesan lokal

Berjalan sepenuhnya di browser Anda

CSS

.pattern {
  background-color: #f2faed;
  background-image: repeating-linear-gradient(45deg, #63c42d 0 6px, transparent 6px 24px);
}

Setiap pola hanya dibuat dengan gradien CSS, jadi tidak ada gambar yang perlu di-download, tampilannya tetap tajam pada tingkat zoom apa pun, dan warnanya dapat diubah di stylesheet. Buat pola di belakang teks tetap halus: kontras rendah antara kedua warna membuat teks tetap mudah dibaca.

Cara menggambar pola kotak-kotak

repeating-conic-gradient(#000 0 25%, transparent 0 50%) mewarnai seperempat pertama dan ketiga dari satu putaran di sekitar pusat setiap ubin, sehingga menghasilkan dua persegi diagonal per ubin; background-size mengatur ukuran ubin menjadi dua kali ukuran persegi.

Menggabungkan pola

Gambar latar ditumpuk: cantumkan gradient dari generator gradient CSS setelah pola, dengan pemisah koma, sehingga pola berada di atas gradient.

Cara menggunakannya

  1. Pilih pola.
  2. Pilih dua warna, ukuran pengulangan, serta lebar garis atau ukuran titik.
  3. Salin CSS-nya.

Privasi & batasan

Semuanya berjalan di browser Anda.

Alat terkait

Gradasi CSSGelombang SVGGlassmorphism

Pertanyaan umum

Apakah pola ini berfungsi di setiap browser?

Ya: semua browser terkini mendukung gradien ini, termasuk conic gradient yang digunakan untuk papan catur.

Bagaimana cara menempatkan pola di belakang teks?

Pilih dua warna yang berdekatan agar polanya tetap halus dan teks memiliki kontras yang cukup.

Bisakah saya mengubah sudut garis?

Ya: ubah sudut di repeating-linear-gradient pada CSS yang disalin, misalnya menjadi 60deg, bukan 45deg.

Alat gratis · berjalan di browser anda · tanpa perlu akun