Skip to main content
Penguin ToolsAlat Penguin

Generator Pola Latar Belakang CSS

Hasilkan pola latar belakang menggunakan CSS murni. Sesuaikan garis, titik, kotak-kotak, dan lainnya dengan editor visual.

background: repeating-linear-gradient(
  0deg,
  #ffffff,
  #ffffff 20px,
  #3b82f6ff 20px,
  #3b82f6ff 40px
);
Bagikan alat ini
📖

Cara Menggunakan

Step 1

Pilih Pola

Pilih Pola

Pilih pola: garis, titik, kotak-kotak, dll.

Step 2

Sesuaikan

Sesuaikan

Sesuaikan warna, ukuran, sudut, dll. dengan slider

Step 3

Salin CSS

Salin CSS

Salin kode CSS yang dihasilkan

✨

Fitur

Pratinjau Real-time

Pratinjau pola secara real-time saat Anda menyesuaikan parameter

Pola yang Kaya

Berbagai template pola: garis, titik, kotak-kotak, zigzag, dan lainnya

Tanpa Gambar

Dihasilkan hanya menggunakan gradien CSS untuk performa yang sangat baik

❓

FAQ

Pola latar belakang yang dibuat menggunakan linear-gradient, radial-gradient, dll. CSS tanpa gambar.

🔗Alat Terkait

🎨
Alat Desain

Konverter Kode Warna

Konversi antara kode warna HEX, RGB, dan HSL. Gunakan pemilih warna dan pratinjau waktu nyata untuk pemilihan warna yang intuitif.

🎨
Alat Desain

Pemilih Warna

Pilih warna secara intuitif menggunakan roda warna dan slider. Dapatkan dan salin kode warna dalam format HEX, RGB, dan HSL.

🎨
Alat Desain

Ekstraktor Warna Gambar

Deteksi warna dominan dari gambar secara otomatis dan hasilkan palet warna. Anda juga dapat mengklik di mana saja pada gambar untuk mengambil warna individual.

🎯
Alat Desain

Pengambil Warna Rata-rata Gambar

Hitung warna rata-rata dari seluruh gambar atau area yang dipilih. Berguna untuk memilih skema warna atau warna latar belakang thumbnail.

🌈
Alat Desain

Generator CSS Gradien

Buat gradien CSS secara visual dengan kontrol seret. Mendukung tipe gradien linear, radial, dan conic dengan preset.

🔲
Alat Desain

Generator CSS Box Shadow

Buat CSS box-shadow secara visual dengan slider. Mendukung beberapa bayangan dan bayangan inset.