Pembuat Pola / Tekstur

Hasilkan pola latar belakang SVG yang mulus untuk proyek web apa pun dengan generator pola gratis kami. Pilih dari 10 jenis pola - titik, kisi, garis, tanda pangkat, segi enam, dan banyak lagi - dan konfigurasikan warna, ukuran ubin, lebar guratan, rotasi, dan opasitas. Ekspor sebagai CSS, gaya inline React/Tailwind, atau ubin SVG mentah. Semua generasi berjalan secara lokal di browser Anda tanpa perlu mendaftar.

Beranda
Alat Data
Generator
Pembuat Pola / Tekstur

Pattern / Texture Generator

Choose a pattern type, configure colors and size, and get a seamless SVG background pattern with ready-to-use CSS and React/Tailwind output. All generation runs locally in your browser - no data is sent to any server.

Pattern Type

Dots

Grid

Stripes

Diagonal Lines

Checkerboard

Chevrons

Triangles

Hexagons

Crosshatch

Waves

Pattern Color

#009bf9

Background Color

#ffffff

Tile Size (px)

Width and height of the repeating tile

Stroke / Element Width (px)

Line thickness or dot radius multiplier

Rotation (degrees)

Rotate the entire pattern tile

Pattern Opacity (0-1)

Opacity of the pattern layer over the background

Live Preview

This is a live preview of the seamless tiling pattern at the configured size and colors.

CSS Snippet - paste into your stylesheet

.pattern-background {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E   %3Crect width='24' height='24' fill='%23ffffff'/%3E   %3Cdefs%3E     %3Cpattern id='p' width='24' height='24' patternUnits='userSpaceOnUse'%3E       %3Ccircle cx='12' cy='12' r='2.25' fill='%23009bf9'/%3E     %3C/pattern%3E   %3C/defs%3E   %3Crect width='24' height='24' fill='url(%23p)' opacity='1'/%3E %3C/svg%3E");
  background-repeat: repeat;
  background-size: 24px 24px;
}

React / Tailwind Inline Style

style={{ backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E   %3Crect width='24' height='24' fill='%23ffffff'/%3E   %3Cdefs%3E     %3Cpattern id='p' width='24' height='24' patternUnits='userSpaceOnUse'%3E       %3Ccircle cx='12' cy='12' r='2.25' fill='%23009bf9'/%3E     %3C/pattern%3E   %3C/defs%3E   %3Crect width='24' height='24' fill='url(%23p)' opacity='1'/%3E %3C/svg%3E")`, backgroundRepeat: 'repeat', backgroundSize: '24px 24px', backgroundColor: '#ffffff' }}

SVG Tile Markup - use as a standalone SVG or in CSS

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
  <rect width="24" height="24" fill="#ffffff"/>
  <defs>
    <pattern id="p" width="24" height="24" patternUnits="userSpaceOnUse">
      <circle cx="12" cy="12" r="2.25" fill="#009bf9"/>
    </pattern>
  </defs>
  <rect width="24" height="24" fill="url(#p)" opacity="1"/>
</svg>

Mengapa Menggunakan Generator Pola/Tekstur Kami?

Pembuatan Pola Instan: Hasilkan pola latar belakang SVG yang mulus dalam milidetik langsung di browser Anda. Generator pola kami menghasilkan pola piksel yang sempurna dan dapat disusun tanpa batas dengan pratinjau langsung - tidak ada server yang bolak-balik atau penundaan pengunggahan.
Secure Pattern Generator Online: Semua pembuatan pola berjalan secara lokal di browser Anda. Pilihan warna dan pengaturan desain Anda tidak pernah hilang dari perangkat Anda saat Anda menggunakan pembuat pola kami secara online - 100% pribadi, sepenuhnya mampu offline.
Pattern Generator Online - Tanpa Instalasi: Gunakan generator pola gratis kami langsung di browser modern apa pun tanpa perlu mengunduh, plugin, atau perangkat lunak. Hasilkan pola latar belakang SVG untuk proyek apa pun dari perangkat apa pun, di mana pun, sepenuhnya gratis.
10 Tipe Pola dengan Ekspor CSS Lengkap: Pilih dari 10 tipe pola - titik, kisi, garis, garis diagonal, kotak-kotak, chevron, segitiga, segi enam, garis silang, dan gelombang. Ekspor sebagai CSS, gaya inline React/Tailwind, atau markup ubin SVG mentah.

Kasus Penggunaan Umum untuk Generator Pola/Tekstur

Latar Belakang Pahlawan Situs Web: Gunakan generator pola kami untuk membuat latar belakang titik atau kisi halus untuk bagian pahlawan, laman landas, dan spanduk pemasaran yang menambah kedalaman visual tanpa mengganggu konten.
Latar Belakang Komponen UI: Terapkan pola mulus ke kartu, sidebar, modals, dan status kosong untuk menambah tekstur dan daya tarik visual. Generator pola kami menghasilkan CSS yang berfungsi dengan pustaka komponen apa pun.
Latar Belakang Slide Presentasi: Menghasilkan pola chevron, garis, atau segi enam untuk latar belakang slide presentasi dan pemisah bagian. Unduh ubin SVG dan gunakan di Figma, Keynote, atau PowerPoint.
Desain Templat Email: Buat pola latar belakang yang halus untuk templat email dan buletin. Generator pola kami menghasilkan nilai gambar latar CSS yang kompatibel dengan inline dan berfungsi di sebagian besar klien email.
Token Tekstur Sistem Desain: Hasilkan serangkaian pola latar belakang yang konsisten untuk sistem desain Anda - satu untuk status kosong, satu untuk memuat kerangka, satu untuk latar belakang bagian - dan ekspor sebagai variabel CSS.
Prototyping dan Wireframing: Gunakan pola kotak-kotak atau crosshatch sebagai latar belakang placeholder selama wireframing dan prototyping untuk menunjukkan area gambar atau zona konten tanpa menggunakan aset nyata.

Apa itu Penghasil Pola/Tekstur?

Generator pola adalah alat yang menciptakan pola latar belakang yang mulus dan dapat dipasang tanpa batas sebagai gambar SVG. Pola SVG menggunakan elemen <pattern> untuk menentukan ubin yang berulang di kedua arah - menciptakan tekstur kontinu di permukaan apa pun. Generator pola kami mendukung 10 jenis pola - titik, kisi, garis, garis diagonal, kotak-kotak, tanda pangkat, segitiga, segi enam, garis silang, dan gelombang - dengan kontrol penuh atas warna, ukuran ubin, lebar guratan, rotasi, dan opacity. Semua generasi berjalan secara lokal di browser Anda tanpa perlu mengunggah server.

Cara Kerja Generator Pola Kami

Pilih Tipe Pola dan Konfigurasi: Pilih dari 10 tipe pola menggunakan pemilih visual. Atur warna pola, warna latar belakang, ukuran ubin, lebar guratan, sudut rotasi, dan opacity menggunakan kontrol. Pratinjau langsung diperbarui secara instan saat Anda menyesuaikan setiap pengaturan.
Pembuatan Berbasis Browser Instan: Generator pola merender ubin SVG dan mengkodekannya sebagai URI data gambar latar belakang CSS sepenuhnya di browser Anda. Tidak ada data yang dikirim ke server mana pun. Cuplikan CSS, gaya React/Tailwind, dan markup SVG semuanya dihasilkan secara bersamaan.
Salin atau Unduh Outputnya: Salin cuplikan CSS dan tempelkan ke stylesheet Anda, salin gaya inline React/Tailwind untuk penggunaan komponen, atau unduh ubin SVG mentah untuk digunakan dalam alat desain seperti Figma atau Illustrator.

Apa yang dihasilkan oleh Penghasil Pola

Cuplikan CSS: Kelas CSS lengkap dengan warna latar, gambar latar (URI data SVG), pengulangan latar belakang: ulangi, dan ukuran latar belakang - siap untuk ditempelkan ke lembar gaya apa pun.
React / Tailwind Inline Style: String prop gaya JSX dengan semua properti latar belakang - tempel langsung ke komponen React mana pun untuk latar belakang pola instan tanpa file CSS terpisah.
Markup Ubin SVG: Sumber SVG mentah untuk ubin pola - gunakan sebagai file mandiri.svg, impor ke Figma atau Illustrator, atau sematkan langsung ke HTML.
Ubin Mulus: Semua pola dirancang untuk dipasang secara mulus - tepi setiap ubin terhubung sempurna dengan ubin yang berdekatan sehingga polanya berulang tanpa batas tanpa jahitan atau celah yang terlihat.

Tips Menggunakan Pola SVG Secara Efektif

Pertahankan ukuran ubin tetap kecil (16-32 piksel) untuk tekstur padat dan halus, dan lebih besar (48-80 piksel) untuk pola tebal dan terlihat. Gunakan opasitas rendah (0,05-0,15) untuk tekstur latar belakang yang menambah kedalaman tanpa bersaing dengan konten. Kontrol rotasi memungkinkan Anda mengubah garis horizontal menjadi garis diagonal tanpa mengubah jenis pola. Untuk kompatibilitas mode gelap, gunakan properti kustom CSS untuk warna dan buat ulang pola dengan nilai mode gelap. URI data SVG dalam CSS didukung oleh semua browser modern dan tidak memerlukan permintaan file eksternal apa pun.

Pertanyaan yang Sering Diajukan

Generator pola menciptakan pola latar belakang SVG yang mulus dan dapat dipasang tanpa batas. Generator pola kami mendukung 10 jenis - titik, kisi, garis, garis diagonal, kotak-kotak, tanda pangkat, segitiga, segi enam, garis silang, dan gelombang - dan berjalan sepenuhnya di browser Anda tanpa perlu mengunggah server. Tidak perlu mendaftar.

Generator pola mendukung 10 jenis: titik, kisi, garis, garis diagonal, kotak-kotak, tanda pangkat, segitiga, segi enam, garis silang, dan gelombang. Setiap pola dapat dikonfigurasi sepenuhnya dengan warna khusus, ukuran ubin, lebar guratan, sudut rotasi, dan opasitas.

Ya. Semua pembuatan pola berjalan sepenuhnya di browser Anda menggunakan JavaScript dan SVG. Pilihan warna dan pengaturan desain Anda tidak pernah dikirim ke server mana pun, disimpan, atau dicatat. Semuanya tetap sepenuhnya pribadi di perangkat Anda.

Ya. Generator pola kami 100% gratis tanpa pendaftaran, tanpa akun, dan tanpa batasan penggunaan. Hasilkan pola sebanyak yang Anda perlukan - sepenuhnya gratis, selamanya.

Salin cuplikan CSS dan tempel ke stylesheet Anda. Terapkan kelas ke elemen HTML mana pun untuk menambahkan latar belakang pola. CSS menggunakan URI data gambar latar belakang - tidak diperlukan permintaan file eksternal, dan polanya berfungsi di semua browser modern.

Ya. Salin keluaran gaya sebaris React/Tailwind dan tempelkan sebagai penyangga gaya pada elemen JSX mana pun. Ini mencakup semua properti latar belakang yang diperlukan untuk merender pola - tidak diperlukan file CSS.

Ya. Unduh markup ubin SVG sebagai file .svg dan impor ke Figma, Illustrator, Sketch, atau alat desain lainnya yang mendukung SVG. Anda kemudian dapat menggunakannya sebagai pola isian atau tekstur latar belakang dalam file desain Anda.

Atur opacity pola ke nilai rendah (0,05-0,15) dan pilih warna pola yang mendekati warna latar belakang. Ukuran ubin kecil (12-20 piksel) dengan lebar guratan tipis (0,5-1 piksel) menghasilkan tekstur paling halus. Pola titik dan kisi bekerja sangat baik untuk latar belakang yang halus.

Ya. Kesepuluh pola tersebut dirancang untuk disusun secara mulus - tepi setiap ubin terhubung sempurna dengan ubin yang berdekatan sehingga polanya berulang tanpa batas tanpa jahitan atau celah yang terlihat. Hal ini dicapai dengan menggunakan SVG patternUnits="userSpaceOnUse" dengan perhitungan koordinat yang tepat.