Softonic

Generator Tekstur Noise

Langkah 1 / 2
Berikutnya

Sedikit noise dapat menyamarkan banding, melembutkan bidang warna datar, dan membuat gradien antarmuka terasa tidak terlalu steril. Generator ini membuat tekstur noise persegi yang bisa diubin tanpa sambungan terlihat menggunakan filter SVG feTurbulence, lengkap dengan pengatur warna latar, opasitas noise, frekuensi butiran, dan jenis noise. Hasil akhirnya berupa CSS siap pakai: warna latar plus data URI SVG sebaris yang bisa langsung ditempel ke stylesheet.

Cara membuat tekstur noise

  1. 1

    Pilih warna latar

    Butiran ditumpuk di atas warna ini, jadi mulailah dari permukaan yang memang akan Anda pakai.

  2. 2

    Atur opasitas

    Dari nyaris tak terlihat (2-5%) hingga butiran film yang tebal (25%+). Untuk antarmuka, yang halus biasanya menang.

  3. 3

    Setel frekuensinya

    Frekuensi dasar yang lebih tinggi menghasilkan butiran halus dan rapat; yang lebih rendah menghasilkan bercak besar dan lembut.

  4. 4

    Pilih jenis noise

    Noise fraktal terasa lembut dan alami. Turbulensi lebih kontras dan berkesan berawan.

  5. 5

    Salin CSS-nya

    Keluarannya berupa warna latar plus data URI SVG sebaris, siap ditempel ke stylesheet Anda.

Noise SVG dengan feTurbulence

Cara paling ringkas untuk mengirimkan noise adalah SVG plus filter turbulensi:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <filter id="n">
    <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch" />
  </filter>
  <rect width="100%" height="100%" filter="url(#n)" opacity="0.3" />
</svg>

Tempelkan sebaris sebagai background-image: url("data:image/svg+xml,...") dan Anda mendapat markup beberapa ratus byte yang bisa diubin di permukaan apa pun, tanpa permintaan HTTP tambahan.

Pengaturan yang disarankan menurut kebutuhan

Kebutuhan Opasitas Frekuensi dasar Jenis noise
Panel antarmuka mode gelap 3-5% 0.8-1.0 Noise fraktal
Lapisan di atas gradien hero 5-10% 0.7-0.9 Noise fraktal
Kartu bertekstur kertas 8-15% 0.6-0.8 Noise fraktal
Tampilan foto berbutir film 15-25% 0.9-1.2 Noise fraktal
Butiran poster retro 25-40% 0.4-0.6 Turbulensi

Catatan performa

  • Turbulensi SVG tidak memakai GPU di sebagian besar peramban. Filter ini bekerja pada latar CSS dan digambar ulang dengan biaya rendah.
  • Pakai satu ubin saja. Generator ini menghasilkan ubin 200 x 200 dengan stitchTiles="stitch", sehingga pengulangannya tidak terlihat di layar lebar.
  • Hindari menganimasikan noise. feTurbulence tidak dapat dianimasikan dengan baik tanpa mengubah baseFrequency, dan performanya anjlok pada sesi yang panjang.
  • Tumpuk noise di atas gradien. Butiran dengan opasitas 10% di atas gradien CSS menghasilkan permukaan yang lebih kaya daripada gradien saja.

Pertanyaan yang Sering Diajukan

Setiap kali ada bidang warna datar atau gradien luas yang terasa terlalu bersih. Bagian hero, latar modal, dan panel antarmuka gelap terasa lebih berdimensi dengan noise 3-10%. Hindari pada area teks karena bisa mengganggu keterbacaan.

Pada filter feTurbulence milik SVG, type="turbulence" menghasilkan nilai mutlak dari noise Perlin (kontras lebih tinggi, berkesan berawan), sedangkan type="fractalNoise" memberi nilai bertanda (butiran lebih lembut dan alami). Untuk antarmuka, noise fraktal hampir selalu jadi pilihan yang tepat.

Tidak. Generator ini mengeluarkan data URI SVG sebaris berukuran beberapa ratus byte yang tertanam langsung di CSS, jadi tidak ada berkas gambar dan tidak ada permintaan tambahan. Hasilnya juga bisa diperbesar ke permukaan mana pun tanpa kehilangan ketajaman.

Ya. Gradien pada layar 8 bit per kanal bisa memunculkan banding yang terlihat pada kontras rendah. Lapisan noise 2-3% melakukan dithering pada peralihan warna dan menghilangkan banding tersebut, baik di ponsel maupun monitor.

Alat Terkait

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Referensi pintasan papan ketik

Cari pintasan bawaan terdokumentasi untuk VS Code, Chrome, dan Bash dengan GNU Readline di macOS, Windows, dan Linux.

Generator EditorConfig

Buat file .editorconfig dengan gaya dan ukuran indentasi, akhir baris, charset, dan aturan spasi Anda untuk format yang konsisten di berbagai IDE dan editor.

Validator Email

Validasi alamat email: pemeriksaan sintaks RFC 5322, pengecekan live record MX, serta detail bagian lokal, domain, dan panjang. Tidak ada email yang dikirim.

Pemformat HTML

Format HTML secara lokal di browser dengan inden dua atau empat spasi. HTML tidak diunggah atau divalidasi.

Alat ini tersedia dalam bahasa lain