Lompat ke konten
Aback Tools Logo

Generator Gradien Berulang

Buat pola CSS repeating-linear-gradient(), repeating-radial-gradient(), dan repeating-conic-gradient() - instan dan gratis. Pilih dari 6 gaya pola bawaan (Garis, Zigzag, Papan Catur, Titik, Belah Ketupat, atau Kustom), pilih dua warna, sesuaikan ukuran pola dan offset ubin, dan dapatkan CSS siap produksi dengan satu klik. Sepenuhnya privat dan tanpa pendaftaran.

Repeating Gradient Generator
Build repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() CSS patterns. Choose a pattern style, set colours and pattern size, and copy the CSS instantly.

Pattern Style

Color 1

#6366f1

Color 2

#6366f1

Gradient Type

Pattern Size

50%

Spacing & Offset

0%
0%

Tile Preview (3× tiles)

background: repeating-linear-gradient(to right, #6366f1 0%, #6366f1 40%, #ec4899 40%, #ec4899 100%);

Mengapa Menggunakan Generator Gradien Berulang Kami?

  • 6 Gaya Pola Bawaan: pilih dari pola Garis, Zigzag, Papan Catur, Titik, Belah Ketupat, atau Kustom. Setiap gaya otomatis mengatur posisi perhentian warna dan jenis gradien yang ideal - atau beralih ke mode Kustom untuk kontrol manual penuh.
  • Pratinjau Ubin Langsung & CSS Instan: generator gradien berulang memperbarui pratinjau langsung dan keluaran CSS pada setiap perubahan. Lihat persis bagaimana pola Anda berulang di area pratinjau dan salin CSS siap produksi dengan satu klik.
  • 100 % Privat - Tanpa Unggahan: semua pembuatan gradien terjadi lokal di browser Anda. Warna dan pola Anda tidak pernah meninggalkan perangkat dan tidak pernah dikirim ke server mana pun. Aman untuk proyek klien dan design system kepemilikan.
  • Gratis & Tanpa Batas: buat gradien berulang tanpa batas tanpa pendaftaran, langganan, dan batas penggunaan. Generator gradien berulang sepenuhnya gratis selamanya tanpa iklan yang menghalangi antarmuka.

Kasus Penggunaan Umum Gradien Berulang

  • Pola Latar Website: desainer web menggunakan generator gradien berulang untuk membuat pola latar mulus untuk bagian hero, blok konten, dan pembatas halaman. Gradien berulang memuat lebih cepat daripada file gambar dan diskalakan sempurna di resolusi apa pun.
  • Tabel & Daftar Bergaris CSS: pengembang front-end menggunakan repeating-linear-gradient untuk membuat baris tabel zebra, latar daftar bergantian, dan pola garis waktu. Salin CSS langsung ke stylesheet Anda dengan satu klik.
  • Token Pola Design System: tim design system menggunakan generator gradien berulang untuk mendefinisikan token pola untuk latar dekoratif, status pemuatan, dan elemen placeholder. Pembuat visual memudahkan menyelaraskan pola dengan warna merek.
  • Grafik Media Sosial & Pemasaran: pemasar dan pembuat konten menggunakan generator gradien berulang untuk membuat latar pola khas bagi pos media sosial, infografis, dan header email. Pustaka prasetel menyediakan titik awal instan.
  • Elemen UI Dekoratif: pengembang UI menggunakan gradien berulang untuk bilah progres, spinner pemuatan, bingkai dekoratif, dan tekstur latar. Gradien berulang radial dan konik menambahkan efek visual unik pada komponen UI.
  • Desain Landing Page & CTA: pengoptimalkan konversi menggunakan generator gradien berulang untuk membuat latar CTA dan pembatas bagian yang menarik perhatian dan membuat halaman menonjol, sambil menjaga waktu muat cepat tanpa permintaan gambar.

Apa Itu Gradien CSS Berulang?

Gradien CSS berulang adalah gradien yang mengubinkan atau mengulang polanya di seluruh elemen menggunakan fungsi repeating-linear-gradient(), repeating-radial-gradient(), atau repeating-conic-gradient(). Berbeda dari gradien biasa yang meregang di seluruh elemen, gradien berulang menciptakan pola dengan mengulang urutan perhentian warna. Generator gradien berulang kami membangun pola berulang yang mulus secara visual dan menghasilkan CSS siap produksi.

Bagaimana Generator Gradien Berulang Kami Bekerja

  1. Pilih gaya pola: pilih dari 6 gaya pola bawaan (Garis, Zigzag, Papan Catur, Titik, Belah Ketupat, atau Kustom) atau mulai dari awal dengan mode Kustom untuk kontrol penuh atas setiap perhentian warna.
  2. Konfigurasikan warna dan ukuran pola: pilih dua warna dengan pemilih warna, sesuaikan ukuran pola (panjang pengulangan), dan atur jarak serta offset ubin. Pratinjau langsung diperbarui secara instan - tanpa tombol yang perlu ditekan.
  3. Salin CSS: klik «Salin CSS» untuk menyalin deklarasi background: siap produksi ke clipboard Anda. Tempelkan langsung ke stylesheet Anda.

Gradien Berulang vs Tidak Berulang

  • Gradien biasa meregang dari satu tepi elemen ke tepi lainnya. Perhentian warna menentukan seluruh transisi, dan gradien mengisi elemen tepat sekali terlepas dari ukuran elemen.
  • Gradien berulang mengubinkan pola perhentian warna di seluruh elemen. Ukuran pola ditentukan oleh posisi perhentian warna Anda - posisi perhentian terakhir menetapkan panjang pola. Gradien berulang ideal untuk membuat latar bergaris, pola papan catur, dan tekstur mulus tanpa file gambar.
  • Kinerja: gradien CSS berulang dirender oleh browser dan tidak memerlukan permintaan jaringan sama sekali, menjadikannya jauh lebih cepat daripada pola berbasis gambar. Gradien ini diskalakan tanpa batas tanpa pikselasi dan berfungsi pada resolusi apa pun.

Ukuran Pola, Jarak, dan Offset Ubin

Penggeser Ukuran Pola mengatur panjang satu siklus pola lengkap sebagai persentase dari kontainer. Nilai lebih kecil menciptakan lebih banyak pengulangan. Opsi Jarak menyisipkan pemisah antara ubin pola untuk tampilan berubin yang lebih tegas. Offset Ubin menggeser ubin berikutnya secara horizontal atau vertikal, menciptakan efek bertingkat seperti dinding bata atau papan catur bergeser. Kontrol ini memberi Anda kebebasan penuh untuk menyesuaikan pola berulang dengan kebutuhan desain Anda yang tepat.

Pertanyaan yang Sering Diajukan

Gradien CSS berulang adalah gradien yang mengulang pola perhentian warnanya di seluruh elemen menggunakan fungsi repeating-linear-gradient(), repeating-radial-gradient(), atau repeating-conic-gradient(). Berbeda dari gradien biasa yang meregang sekali di seluruh elemen, gradien berulang menciptakan pola mulus - mirip wallpaper atau ubin. Semuanya didefinisikan dalam CSS, tidak memerlukan file gambar, dan diskalakan tanpa batas tanpa pikselasi.

Gradien biasa yang tidak berulang meregangkan perhentian warnanya di seluruh elemen dari tepi ke tepi. Gradien berulang mengubinkan pola yang ditentukan oleh perhentian warna. Perbedaan utamanya adalah gradien berulang menggunakan posisi perhentian warna untuk menentukan ukuran pola - posisi perhentian terakhir menentukan besar satu ubin. Apa pun di luar posisi itu akan berulang dari awal. Ini membuat gradien berulang sempurna untuk garis, papan catur, dan pola berubin lainnya.

Generator gradien berulang menawarkan 6 gaya pola: Garis (garis bergantian penuh ke segala arah), Zigzag (pola gelombang zigzag), Papan Catur (kotak bergantian), Titik (titik radial berulang), Belah Ketupat (pola belah ketupat), dan Kustom (kontrol manual penuh atas semua perhentian warna dan jenis gradien). Setiap gaya otomatis mengatur posisi perhentian warna dan jenis gradien yang optimal, tetapi Anda selalu dapat beralih ke Kustom untuk kontrol penuh.

Penggeser Ukuran Pola mengatur besar satu siklus pola lengkap relatif terhadap kontainer. Persentase lebih kecil menciptakan lebih banyak pengulangan pada area yang sama (pola lebih halus), sedangkan persentase lebih besar menciptakan lebih sedikit pengulangan yang lebih besar (pola lebih kasar). Misalnya, pada 25 % Anda akan melihat 4 pengulangan pada kontainer, pada 50 % Anda melihat 2 pengulangan, dan pada 100 % Anda melihat tepat 1 siklus pola lengkap.

Ya. Semua pembuatan gradien terjadi 100 % di sisi klien pada browser Anda menggunakan JavaScript. Pilihan warna dan konfigurasi pola Anda tidak pernah dikirim ke server mana pun, tidak pernah disimpan, dan tidak pernah ditransmisikan. Generator gradien berulang sepenuhnya privat dan aman untuk proyek klien.

Ya. Salin nilai gradien (bagian di dalam deklarasi background:, tanpa «background:») dan gunakan pada kelas nilai arbitrer Tailwind: bg-[repeating-linear-gradient(to_right,#6366f1_0,#6366f1_40px,#ec4899_40px,#ec4899_80px)]. Ganti spasi dengan garis bawah pada nilai arbitrer Tailwind. Alternatifnya, tambahkan gradien ke tailwind.config.js Anda di theme.extend.backgroundImage untuk digunakan kembali di seluruh proyek.

Gradien linear dan radial berulang didukung di semua browser modern tanpa prefiks vendor. Gradien konik berulang didukung di Chrome 69+, Firefox 83+, Safari 12.1+, dan Edge 79+. Untuk browser lama (IE11 dan lebih lama), pertimbangkan menyediakan warna solid sebagai cadangan sebelum deklarasi gradien.

Ya. Generator gradien berulang 100 % gratis tanpa pendaftaran, tanpa fitur premium, dan tanpa batas penggunaan. Buat gradien berulang tanpa batas tanpa pembatasan atau biaya tersembunyi.