CSS Pola Generator

Pola latar belakang CSS

Pola latar belakang CSS adalah gambar yang diulang-ubin: garis-garis, titik-titik, kisi, papan catur, segitiga: digambar sepenuhnya dengan fungsi gradient CSS dan tanpa file gambar. Tiga properti melakukan semua pekerjaan: background-image mengecat gambar gradient apa pun ke elemen, background-size mengatur ukuran satu ubin dari gambar itu, dan background-repeat (yang default ke repeat) mengulangi gambar itu di kedua sumbu. background-position kemudian menggeser jahitan sehingga ubin setiap layer berbaris dengan yang lain. Pola karenanya hanyalah beberapa gambar gradient yang ditumpuk satu di atas yang lain, masing-masing diukur ke ubin yang sama, masing-masing diposisikan untuk saling mengunci. Browser mengecat nilai background-image yang dipisahkan-koma dari depan ke belakang, sehingga gambar pertama dalam daftar berada di atas yang kedua, yang kedua di atas yang ketiga, dan seterusnya.

Seluruh genre ini ada berkat satu trik sintaksis: hard color stops. Color stop yang berdekatan pada posisi yang sama menghasilkan transisi instan daripada perpaduan. linear-gradient(red 50%, blue 50%) bukanlah dissolve dari merah ke biru: itu adalah garis tajam. Tanpa hard stop Anda mendapatkan gradient yang halus; dengan mereka Anda mendapatkan geometri. Garis-garis, titik-titik, papan catur, segitiga, chevron: setiap pola yang dipancarkan alat ini dibangun dari properti tunggal itu, diterapkan pada sudut dan ukuran ubin yang berbeda.

Sejarah Singkat: Lea Verou dan Patterns Gallery

Jika satu sumber daya bertanggung jawab untuk seluruh genre pola latar belakang murni-CSS, itu adalah CSS3 Patterns Gallery oleh Lea Verou, awalnya dihosting di lea.verou.me/css3patterns/. Verou telah memposting demo individual sepanjang 2010 dan ke awal 2011, termasuk walkthrough papan catur yang dirayakan pada Februari 2011, sebelum mengumumkan galeri yang sebenarnya pada 15 April 2011 dalam pos berjudul "CSS3 patterns gallery and a new pattern" (pola baru adalah desain kubus-Jepang yang ia sebut paling sulit yang pernah ia buat). Beberapa bulan kemudian, pada 1 Desember 2011, ia menulis esai kanonis "CSS3 Patterns, Explained" untuk kalender adven 24 ways: masih merupakan penjelasan bahasa Inggris-biasa terbaik dari teknik hard-color-stop yang mendasari setiap garis, polka dot, dan pola papan catur. Pada Juni 2015 O'Reilly menerbitkan bukunya CSS Secrets: Better Solutions to Everyday Web Design Problems, yang memperluas bab pola menjadi taksonomi penuh. Dampak budaya yang lebih luas dari galeri didokumentasikan dalam catatan proyek Verou sendiri: itu "memulai praktik luas penggunaan hard stop dalam gradient CSS untuk dengan mudah membuat pola latar belakang dan grafik lainnya" dan kemudian digunakan oleh insinyur Opera Software untuk menyetel implementasi gradient mereka.

Dari Prefiks Vendor ke Spesifikasi

Gradient CSS didefinisikan dalam CSS Image Values and Replaced Content Module Level 3 (umumnya "CSS Images 3"), dipelihara oleh W3C CSS Working Group dan diedit oleh Tab Atkins Jr. dan Elika J. Etemad antara lain. First Public Working Draft adalah 12 Juli 2011; spesifikasi mencapai Candidate Recommendation pada April 2012, mengunci sintaks tanpa-prefiks modern: termasuk konvensi bahwa 0deg menunjuk ke atas dan to right sama dengan 90deg. Urutan pengiriman browser: WebKit yang pertama dengan margin lebar, dengan -webkit-gradient() dapat digunakan di Safari 4 (2009); Firefox mengirim -moz-linear-gradient() di Firefox 3.6 (21 Januari 2010); Internet Explorer 10 mengirim bentuk tanpa-prefiks pada 2012; sintaks tanpa-prefiks stabil di seluruh mesin utama pada akhir 2013. conic-gradient() dispesifikasikan dalam CSS Images Level 4 karena Level 3 sudah memasuki Last Call ketika sintaks sedang dirancang; itu dikirim di Chrome 69 (4 September 2018), Safari 12.1 (25 Maret 2019), dan Firefox 83 (17 November 2020). Pada 2026 Anda dapat menulis background: linear-gradient(...) dan background: conic-gradient(...) dengan percaya diri tanpa prefiks dan tanpa fallback untuk browser apa pun yang layak didukung.

linear-gradient: Sudut dan Sisi

Tata bahasa formalnya adalah linear-gradient([<angle> | to <side-or-corner>], <color-stop>, ...). Konvensi sudut sering membuat pengembang tersandung karena berbeda dari konvensi SVG/canvas. 0deg setara dengan to top (garis gradient menunjuk ke atas, sehingga warna terakhir muncul di bagian atas kotak). 90deg sama dengan to right. 180deg sama dengan to bottom (default jika tidak ada arah yang diberikan). 270deg sama dengan to left. Sudut yang meningkat berputar searah jarum jam dari atas: kebalikan dari konvensi matematis (di mana 0 adalah kanan dan sudut meningkat berlawanan jarum jam) dan kebalikan dari <linearGradient> SVG. Halusan yang berguna: to right dan 90deg setara hanya pada kotak persegi. Pada kotak non-persegi, to top right menghasilkan garis gradient yang persis tegak lurus terhadap diagonal dari sudut kiri-bawah: artinya gradient mengenai sudut dengan bersih: sementara 45deg selalu secara harfiah 45 derajat, terlepas dari rasio aspek. Ini kurang penting untuk pola yang diulang (di mana ubin biasanya persegi) tetapi sangat penting untuk latar belakang hero.

radial-gradient: Bentuk, Ukuran, dan Polka Dot

Tata bahasanya adalah radial-gradient([<shape> || <size>] [at <position>]?, <color-stop>, ...). Dua nilai bentuk adalah circle dan ellipse (default ellipse). Ukuran dapat berupa salah satu dari empat keyword extent: closest-side, closest-corner, farthest-side, atau farthest-corner (default): atau panjang/persentase eksplisit. Untuk pola polka-dot resep kanonisnya adalah radial-gradient(circle at center, #000 0 5px, transparent 5px) dengan background-size: 20px 20px: lingkaran hitam 5-px di tengah setiap ubin 20-px, dengan sisanya transparan. Titik-titik dapat di-offset dengan layer kedua di setengah ubin untuk menghasilkan kisi titik heksagonal. Untuk garis-garis murni Anda tidak perlu mengukur ubin secara manual: repeating-linear-gradient(45deg, #000 0 10px, #fff 10px 20px) menghasilkan garis-garis diagonal hitam-putih lebar 10 px, mengulang di seluruh kotak, tanpa deklarasi background-size diperlukan. Gradient yang berulang juga memiliki rekan radial dan conic: repeating-radial-gradient membuat cincin konsentris, repeating-conic-gradient membuat pinwheel.

conic-gradient: Pie Chart dan Sunburst yang Tidak Bisa Anda Bangun Sebelumnya

conic-gradient() memutar color stop di sekitar pusat daripada di sepanjang garis atau keluar dari pusat. Color stop diposisikan dalam sudut, bukan panjang. Sejarah intelektualnya adalah salah satu cerita CSS yang lebih menarik: Lea Verou menyusun proposal conical-gradient() sejak 2011, jauh sebelum browser mendukungnya, dan Tab Atkins Jr. mengkredit drafnya ketika ia secara formal menambahkan fungsi ke CSS Image Values Level 4. Implementasi tertinggal selama bertahun-tahun. Pada Juni 2015, Verou menulis polyfill: menggunakan SVG dan pustaka -prefix-free-nya: dan merilisnya di panggung di CSSConf, menyebut pos itu "Conical gradients, today!" Pengiriman native tiba di Chrome 69 (4 September 2018), Safari 12.1 (25 Maret 2019), dan Firefox 83 (17 November 2020). Apa yang dibuka conic gradient yang linear dan radial tidak bisa: pie chart dan donut chart tanpa canvas, SVG, atau JS (conic-gradient(red 0 25%, blue 25% 60%, green 60% 100%) plus border-radius: 50% adalah pie chart lengkap); roda warna (conic-gradient(red, yellow, lime, aqua, blue, magenta, red) menghasilkan roda hue standar); pola sunburst dan starburst dari warna hard-stop bergantian pada interval sudut kecil; bingkai gradient dan highlight sudut bersudut; dan papan catur dalam satu deklarasi (repeating-conic-gradient(#000 0 25%, #fff 0 50%) plus background-size menghasilkan papan catur dengan satu layer gradient alih-alih dua linear gradient yang ditumpuk).

Kinerja: Kapan Pola CSS Mengalahkan Gambar, dan Kapan Tidak

Argumen kinerja untuk pola murni-CSS adalah yang paling layak ditangkap dengan benar karena oversimplified dalam copy marketing. Kemenangan murni CSS: tidak ada permintaan HTTP, tidak ada decode, tidak ada overhead PNG/JPEG/WebP: aturan CSS 4-baris menggantikan file biner; vector-resolution-independent: pola terlihat identik pada device pixel ratio 1×, 2×, 3× tanpa perlu mengirim aset @2x dan @3x, yang merupakan satu alasan terbesar sistem desain lebih memilih pola gradient daripada PNG untuk tampilan retina; sepele dapat diwarnai ulang: mengubah variabel CSS memperbarui seluruh pola; dapat dianimasikan melalui background-position atau, dengan @property, melalui color stop yang dapat dianimasikan. Biaya yang perlu diketahui: biaya cat skala dengan pixel yang disentuh dan kompleksitas gradient: gradient termasuk operasi cat yang lebih mahal di samping box-shadow besar, SVG kompleks, dan efek teks berat, dan menumpuk banyak layer gradient di seluruh hero viewport-penuh dapat menelan frame pada GPU low-end. Menganimasikan warna gradient memicu repaint penuh setiap frame (ini berubah dengan properti custom yang terdaftar-@property di Chromium dan Firefox, tetapi masih lebih aman untuk menganimasikan background-position sebagai gantinya). Heuristik praktis: jika Anda memiliki pola viewport-penuh tunggal dan Anda tidak menganimasikannya, Anda tidak akan menyadari. Jika Anda menumpuk lima layer gradient di setiap kartu dalam daftar panjang, profil itu.

Aksesibilitas: Kontras, Dekorasi, dan Reduced Motion

Pola latar belakang CSS adalah, menurut definisi, dekoratif. Mereka tidak muncul di pohon dokumen atau pohon aksesibilitas; dari perspektif teknologi-bantu mereka tidak ada. Itu sebagian besar fitur: tutorial W3C WAI tentang Decorative Images secara eksplisit mengatakan bahwa citra dekoratif "harus disediakan menggunakan gambar latar belakang CSS sebagai gantinya" dari <img> sehingga secara alami diabaikan oleh pembaca layar. Tetapi kontras masih berlaku untuk apa pun yang Anda letakkan di atas pola. WCAG 2.1 Success Criterion 1.4.3 memerlukan rasio kontras 4,5:1 untuk teks normal dan 3:1 untuk teks besar. Pola membuat ini lebih sulit karena luminansi lokal latar belakang bervariasi pixel demi pixel. WCAG Technique G18 mengatasi ini secara langsung: jika latar belakang berpola, latar belakang di sekitar huruf dapat dipilih atau dibayangi sehingga huruf mempertahankan rasio kontras 4,5:1 dengan latar belakang di belakangnya, bahkan jika mereka tidak memiliki rasio kontras itu dengan seluruh latar belakang. Dalam praktik: jika Anda meletakkan teks di atas pola, baik pilih warna pola dengan luminansi yang serupa satu sama lain, atau letakkan kartu warna-solid antara teks dan pola. WCAG 2.1 juga memerlukan kontras 3:1 untuk komponen UI non-teks dan grafik, yang dapat berlaku untuk ikon dan pemisah berbasis-pola. Jika pola Anda dianimasikan: garis bergulir, conic yang berputar perlahan, kerangka shimmer: bungkus animasi dalam @media (prefers-reduced-motion: no-preference). Motivasinya medis, bukan stilistik: animasi dapat memicu gejala vestibular (mual, pusing), kejang pada pengguna dengan epilepsi fotosensitif, dan migrain.

Pola SVG vs Gradient CSS: Perbandingan yang Adil

Elemen <pattern> SVG adalah saudara spiritual dari gradient CSS. Keduanya memungkinkan Anda mengulang sel unit di seluruh area pengisian. Mereka memiliki sweet spot yang berbeda. Pola SVG menang ketika unit adalah bentuk kompleks (daun, sisik ikan, heksagon tidak teratur) yang gradient tidak dapat mengekspresikan secara alami; ketika Anda ingin mengirim aset yang dirancang-desainer (Hero Patterns oleh Steve Schoger, diluncurkan 27 September 2016 di bawah CC BY 4.0, adalah pustaka pola SVG kanonis); ketika Anda membutuhkan geometri vektor yang tepat untuk kurva tajam yang hard-stop gradient hanya dapat memperkirakan; atau ketika Anda ingin pola digunakan kembali di beberapa elemen SVG melalui fill="url(#myPattern)". Gradient CSS menang ketika pola bersifat geometris: garis-garis, titik-titik, kisi, papan catur, chevron, segitiga, apa pun yang dapat dikomposisikan dari garis lurus dan lingkaran; ketika Anda ingin nol overhead HTTP; ketika Anda membutuhkan kustomisasi per-instance melalui variabel CSS (--stripe-color: red memperbarui pola secara instan); ketika Anda ingin menerapkan pola sebagai latar belakang CSS ke elemen HTML apa pun, tidak hanya di dalam SVG; atau ketika Anda ingin menganimasikan pola tanpa elemen <animate>. Teknik hibrida umum adalah inline SVG sebagai URL data:image/svg+xml,... di dalam background-image: ini mendapatkan kemenangan tidak-ada-permintaan-HTTP-tambahan dari murni-CSS sambil membiarkan desainer mengekspresikan bentuk sembarang. Sisi negatifnya adalah keribetan pengkodean: # menjadi %23, tanda kutip ganda perlu di-escape, dan memeriksa SVG di DevTools canggung. Generator ini memancarkan pola gradient murni-CSS; trade-off-nya disengaja, kesederhanaan dan payload kecil di atas fleksibilitas bentuk maksimum.

Di Mana Pola CSS Memperoleh Nafkahnya

Genre ini lebih luas dari wallpaper. Penggunaan produksi nyata termasuk:

• Latar belakang bagian hero. Pola skala-besar yang halus di belakang judul halaman: garis diagonal, titik besar, sunburst conic-gradient lembut: memberikan tekstur visual hero tanpa menambah berat gambar.
• Placeholder status-kosong. Ketika daftar tidak memiliki item, pola papan catur atau kisi di area kosong mengomunikasikan "ini sengaja kosong" lebih baik daripada ruang putih datar.
• Skeleton pemuatan. Skeleton "shimmer" klasik adalah linear-gradient dengan putih semi-transparan yang bergerak melintasi latar belakang abu-abu, dianimasikan melalui background-position. Teknik ini sekarang adalah standar UX.
• Latar belakang kartu dan badge. Kisi titik samar di belakang badge "Pro" atau pinstripe diagonal di belakang kartu fitur menambahkan tekstur tanpa bersaing dengan teks.
• Status kesalahan dan peringatan. Garis diagonal berulang (pola kerucut jalan) menandakan "zona peringatan" secara intuitif. repeating-linear-gradient(45deg, #fbbf24 0 10px, #1f2937 10px 20px) adalah overlay "perhatian" universal.
• Estetika retro dan synthwave. Kisi Tron 80-an: kisi magenta yang melengkung perspektif yang berguling menuju cakrawala: adalah efek murni-CSS yang dibangun dari repeating-linear-gradient plus transform: perspective(...) rotateX(...).
• Pemisah bagian. Pita pendek pola lebar penuh antara bagian memecah halaman panjang tanpa menambahkan beban semantik.
• Perforasi ramah-cetak. Garis perforasi titik/dasher untuk tiket dan kupon yang dapat dicetak lebih mudah ditulis dengan repeating-linear-gradient daripada SVG.
• Pola light/dark mode. Pola diperdagangkan dengan baik antara mode light dan dark karena mereka dikendalikan oleh variabel CSS; satu deklarasi beradaptasi dengan kedua palet.

Cara menggunakan

1. Pilih jenis pola: pilih garis-garis, titik-titik, papan catur, kisi, zigzag, segitiga, dan lainnya, semua dalam CSS murni.
2. Sesuaikan warna dan skala: sesuaikan warna depan dan latar belakang, ukuran pola, sudut, dan jarak dengan slider.
3. Pratinjau langsung: pola ditampilkan secara real-time saat Anda memodifikasi pengaturan.
4. Salin CSS: salin properti background yang dihasilkan dan tempel di stylesheet Anda.

Pertanyaan yang Sering Diajukan

Apakah CSS akan berfungsi di browser yang lebih lama?

Setiap browser modern utama mengirim linear-gradient, radial-gradient, dan varian repeating tanpa-prefiks dan aktif secara default: pembersihan selesai pada akhir 2013. conic-gradient memakan waktu lebih lama (Chrome 69 pada September 2018, Safari 12.1 pada Maret 2019, Firefox 83 pada November 2020) tetapi juga universal pada 2026. Generator tidak memancarkan prefiks vendor karena tidak diperlukan untuk browser apa pun yang layak didukung. Microsoft Edge menjatuhkan mesin EdgeHTML-nya pada Januari 2020 dan IE11 mencapai akhir-masa-pakai pada 15 Juni 2022; keduanya sekarang merupakan catatan kaki sejarah untuk alat baru apa pun.

Apakah pola CSS lebih cepat daripada latar belakang gambar yang diulang?

Untuk pola statis, ya: pola CSS menghilangkan permintaan HTTP, pass decode, dan pengiriman aset multi-resolusi yang diperlukan untuk tampilan retina. Pola ini juga vector-perfect pada zoom apa pun dan sepele dapat diwarnai ulang melalui variabel CSS. Trade-off-nya adalah biaya cat: gradient adalah salah satu hal yang lebih mahal yang dapat dicat browser, dan menumpuk banyak layer gradient di seluruh hero viewport-penuh dapat menelan frame pada GPU yang lebih rendah. Untuk pola statis tunggal pada kartu atau bagian, Anda tidak akan menyadari. Jika Anda menemukan diri Anda menumpuk lima layer gradient pada setiap item dalam daftar panjang, profil itu sebelum mengirim.

Bagaimana saya meletakkan teks di atas pola secara dapat-diakses?

WCAG 2.1 SC 1.4.3 memerlukan kontras 4,5:1 untuk teks normal dan 3:1 untuk teks besar terhadap latar belakang. Dengan latar belakang berpola, luminansi lokal bervariasi pixel demi pixel, yang dapat membuat kontras kasus terburuk gagal bahkan jika kontras rata-rata terlihat baik. Dua strategi aman: pilih warna pola dengan luminansi yang serupa satu sama lain (sehingga kontras terhadap teks Anda konsisten di seluruh ubin), atau letakkan kartu warna-solid antara teks dan pola. Meletakkan teks langsung pada pola kontras-tinggi (misalnya garis hitam-putih) adalah kasus di mana checker kontras dan pembaca manusia keduanya kesulitan.

Bisakah saya menganimasikan pola?

Ya. Animasi termurah adalah menggeser background-position dengan @keyframes: ini memicu pembaruan compositor-saja pada sebagian besar browser dan dapat berjalan dengan mulus pada 60 fps. Menganimasikan warna gradient sendiri lebih mahal karena setiap frame memicu cat penuh; Chromium dan Firefox modern dapat memitigasi ini dengan properti custom yang terdaftar-@property, tetapi background-position adalah default yang lebih aman. Selalu bungkus animasi dalam @media (prefers-reduced-motion: no-preference): latar belakang yang dianimasikan dapat memicu gejala vestibular, kejang, dan migrain untuk pengguna sensitif.

Mengapa pola saya terlihat kabur pada tampilan retina?

Seharusnya tidak: itulah seluruh poin penggunaan gradient alih-alih gambar bitmap. Jika punya Anda terlihat kabur, periksa bahwa color stop berada pada persentase tajam (hard stop adalah dua stop pada posisi yang sama; celah kecil bahkan 50% 50.1% memperkenalkan band buram yang terlihat) dan bahwa pengukuran ubin dalam px daripada em atau %, yang dapat berinteraksi tidak dapat diprediksi dengan penskalaan teks. Conic gradient pada versi Safari yang lebih lama dulu merender pusat sebagai area yang sedikit kabur; Safari dan Chrome modern keduanya merasterisasi pada GPU dan masalah sebagian besar hilang.

Apakah data saya dikirim ke mana pun?

Tidak. Pemilihan pola, pemilihan warna, pengukuran, dan generasi CSS semua berjalan di browser Anda. Tidak ada permintaan keluar saat Anda menggunakan kontrol: Anda dapat memverifikasi di tab Network DevTools. CSS yang dihasilkan adalah milik Anda untuk ditempel di mana saja.

Alat terkait