Generator Pola Latar Belakang CSS

Alat ini membuat pola latar belakang berulang hanya menggunakan gradien CSS — tanpa memerlukan file gambar. Pilih polka dot, garis diagonal, kotak-kotak, atau garis grid, sesuaikan warna dan jaraknya, lalu salin CSS background-image langsung ke stylesheet Anda.

Apa Itu Alat Ini?

CSS dapat menggambar pola berulang tanpa file gambar apa pun menggunakan gradien — radial-gradient() dan linear-gradient() — sebagai background-image, dikombinasikan dengan background-size yang lebih kecil dari elemennya sehingga gradien tersebut berubin dan berulang. Polka dot menggunakan repeating radial-gradient, garis dan kotak-kotak menggunakan linear-gradient() yang berulang atau berlapis, dan garis grid menggunakan dua garis linear-gradient() yang tumpang tindih.

Alat ini membuat deklarasi gradien tersebut untuk Anda. Pilih jenis pola, sesuaikan warna pola, warna latar belakang, dan jarak, lalu lihat pratinjau langsung diperbarui — kemudian salin CSS background-image dan background-size yang tepat.

Sumber: CSS Images Module Level 3, W3C — mendefinisikan repeating-linear-gradient() dan repeating-radial-gradient(), fungsi yang menjadi dasar pola-pola ini.

Mengapa Menggunakannya?

Tanpa file gambar, tanpa permintaan HTTP — pola ini murni CSS dan dirender instan pada resolusi berapa pun, termasuk layar retina/DPI tinggi.
Warna dan jarak dapat disesuaikan sepenuhnya tanpa menulis sintaks gradien manual atau menghitung matematika ubin.
Pratinjau langsung menunjukkan pola berulang yang tepat sebelum Anda menyalin apa pun.
Skala dengan bersih karena ini adalah matematika vektor, bukan gambar raster — tidak ada blur saat elemen diubah ukurannya.
Berjalan sepenuhnya di peramban Anda — tidak ada yang Anda konfigurasi yang diunggah ke mana pun.
Gratis, tanpa pendaftaran, berfungsi di ponsel.

Cara Menggunakan

Pilih jenis pola: polka dot, garis diagonal, kotak-kotak, atau garis grid.
Pilih warna pola dan warna latar belakang yang muncul di antara/di belakang bentuk pola.
Sesuaikan slider ukuran untuk membuat titik, garis, atau sel grid lebih besar atau lebih kecil — ini juga mengontrol seberapa rapat pola berulang.
Salin CSS yang dihasilkan dan tempelkan sebagai background-image (dan background-size/background-position jika ditampilkan) pada elemen mana pun.

Contoh

Input

Pola: polka dot · Warna: biru · Latar belakang: putih · Ukuran: 24px

Output

background-color: #ffffff;
background-image: radial-gradient(rgba(59, 130, 246, 1) 3px, transparent 3px);
background-size: 24px 24px;
background-position: 0 0;

Pola polka dot terang klasik yang sering digunakan sebagai latar belakang bagian yang halus atau tekstur kartu.

Bagaimana setiap pola dibangun

Polka dot: sebuah radial-gradient() menggambar satu lingkaran kecil terisi, kemudian background-size membuatnya berulang sebagai grid titik yang berubin.
Garis diagonal: sebuah repeating-linear-gradient() dengan sudut 45 derajat berselang-seling antara warna pola dan warna latar belakang pada interval tetap.
Kotak-kotak: dua lapisan linear-gradient() 45 derajat yang tumpang tindih, digeser satu sama lain setengah ubin, menghasilkan kotak terang/gelap berselang-seling.
Garis grid: dua garis linear-gradient() tipis — satu horizontal, satu vertikal — diubin pada jarak yang dipilih untuk membentuk grid, mirip kertas grafik.

Kapan menggunakan pola CSS alih-alih file gambar

Pola gradien CSS tidak memiliki ukuran file dan tidak memerlukan permintaan HTTP, sehingga dimuat secara instan dan tidak pernah terlihat buram di layar DPI tinggi, tidak seperti ubin latar belakang PNG raster. Ini ideal untuk tekstur halus di belakang teks, pemisah bagian, ilustrasi keadaan kosong, atau kartu placeholder. Untuk pola ilustrasi atau fotografi yang kompleks, gambar sungguhan masih menjadi alat yang tepat — gradien CSS paling cocok untuk bentuk berulang yang sederhana dan geometris seperti di sini.

Memadukan dengan efek CSS lainnya

Pola bekerja dengan baik sebagai latar belakang di balik kartu glassmorphism, karena blur membutuhkan sesuatu dengan tekstur visual di belakangnya agar terlihat. Pola juga cocok dipadukan dengan sudut membulat pada elemen kontainer.

→ Generator Glassmorphism CSS · Generator Border Radius

Pertanyaan yang Sering Diajukan

Apakah pola-pola ini memerlukan file gambar?

Tidak. Setiap pola di sini dihasilkan murni dengan gradien CSS sebagai background-image — tidak ada PNG, SVG, atau file lain yang terlibat, sehingga tidak ada permintaan HTTP tambahan dan tidak ada risiko buram pada layar beresolusi tinggi.

Bisakah saya mengubah ukuran pola?

Ya — slider ukuran mengontrol background-size, yang menentukan seberapa besar satu ubin pola yang berulang. Ukuran lebih kecil membuat titik, garis, atau sel grid lebih rapat; ukuran lebih besar membuatnya lebih renggang.

Mengapa pola kotak-kotak menggunakan dua gradien?

Satu linear-gradient() hanya bisa berganti warna sepanjang satu arah. Melapiskan dua gradien 45 derajat, digeser satu sama lain setengah ubin, adalah yang menghasilkan kotak terang/gelap berselang-seling dari kotak-kotak — ini adalah teknik standar untuk kotak-kotak khusus CSS.

Apakah pola ini akan terlihat tajam di layar retina/DPI tinggi?

Ya. Karena pola adalah gradien matematis, bukan gambar bitmap, ia dirender pada resolusi apa pun yang dibutuhkan layar, tanpa upscaling atau blur — tidak seperti ubin gambar raster kecil yang diregangkan atau diulang pada kepadatan piksel tinggi.

Bisakah saya menggunakan pola ini sebagai latar belakang halaman penuh?

Bisa — terapkan background-image, background-size, dan background-position (jika ada) yang dihasilkan ke body atau elemen kontainer lebar penuh mana pun. Perhatikan kontras: pola yang ramai dan kontras tinggi di belakang teks body dapat mengganggu keterbacaan, jadi pengaturan yang lebih ringan/halus biasanya lebih cocok untuk area latar belakang yang besar.