Generator Teks Glitch CSS

Apa Itu Alat Ini?

Efek glitch CSS meniru tampilan sinyal siaran yang rusak atau kaset VHS yang tergores dengan menduplikasi sepotong teks dua kali menggunakan pseudo-elemen ::before dan ::after, menggeser sedikit setiap salinan dengan text-shadow berwarna (secara klasik merah dan cyan, menggemakan kesalahan sinyal RGB analog), dan menganimasikan clip-path setiap salinan dengan @keyframes sehingga potongan horizontal berbeda dari tiap salinan berwarna berkedip seiring waktu.

Teknik ini tidak memerlukan gambar, loop animasi JavaScript, atau canvas — ini adalah CSS murni yang dilapiskan pada satu elemen HTML yang membawa teksnya sendiri dua kali: sekali sebagai konten teks asli, dan sekali lagi melalui atribut data-text yang dibaca oleh pseudo-elemen dengan content: attr(data-text).

Sumber: CSS Pseudo-Elements Module Level 4, W3C — mendefinisikan pseudo-elemen ::before/::after dan fungsi attr() yang menjadi dasar efek ini.

Mengapa Menggunakannya?

• Pratinjau animasi langsung — lihat efek glitch yang sebenarnya saat Anda mengetik dan menyesuaikan pengaturan, bukan sekadar mockup statis.
• Dua warna aksen yang dapat disesuaikan secara independen, default-nya merah/cyan klasik tetapi dapat disesuaikan untuk merek atau tema apa pun.
• Slider intensitas mengontrol offset piksel dari bayangan warna; slider kecepatan mengontrol seberapa cepat siklus keyframe clip-path.
• Menyalin baik CSS (termasuk blok @keyframes lengkap) maupun struktur HTML yang tepat diperlukan, karena efek ini bergantung pada atribut data-text yang cocok dengan teks yang terlihat.
• CSS murni — tidak perlu JavaScript saat runtime setelah berada di halaman Anda, dan tidak ada pustaka eksternal atau gambar yang perlu dimuat.
• Gratis, tanpa pendaftaran, berjalan sepenuhnya di browser Anda.

Cara Menggunakan

1. Ketik teks yang ingin Anda buat glitch di kolom teks — pratinjau langsung diperbarui.
2. Pilih dua warna aksen; default klasiknya adalah merah dan cyan untuk tampilan retro pemisahan RGB, tetapi dua warna kontras apa pun bisa digunakan.
3. Sesuaikan slider intensitas untuk mengontrol seberapa jauh kedua lapisan warna terpisah — nilai yang lebih tinggi terasa seperti glitch yang lebih agresif.
4. Sesuaikan slider kecepatan untuk mengontrol seberapa cepat glitch berkedip.
5. Salin blok CSS dan tempelkan ke stylesheet Anda.
6. Salin potongan HTML dan gunakan persis seperti yang ditampilkan — atribut data-text harus cocok persis dengan teks yang terlihat pada elemen agar efeknya berfungsi.

Contoh

Input

Teks: "GLITCH" · Warna 1: #ff0040 (merah) · Warna 2: #00fff9 (cyan) · Intensitas: 5px

Output

<div class="glitch" data-text="GLITCH">GLITCH</div>
.glitch::before { text-shadow: 5px 0 #ff0040; ... }
.glitch::after { text-shadow: -5px 0 #00fff9; ... }

Teks dasar tetap putih sementara dua salinan pseudo-elemennya berkedip merah dan cyan di kedua sisi, menghasilkan tampilan klasik sinyal yang rusak.

Mengapa elemen membutuhkan atribut data-text

Pseudo-elemen ::before dan ::after tidak bisa langsung membaca konten teks biasa dari sebuah elemen — content: attr() di CSS hanya berfungsi dengan atribut HTML asli, bukan dengan node teks anak. Itulah sebabnya HTML yang dihasilkan mengulang teks sebagai atribut data-text="..." pada elemen yang sama: teks yang terlihat dirender secara normal, sementara setiap pseudo-elemen secara independen mengambil string yang sama melalui content: attr(data-text) dan melapiskan salinannya sendiri yang beranimasi dan bergeser warna.

Bagaimana kedipan dihasilkan

Setiap pseudo-elemen dianimasikan dengan blok @keyframes-nya sendiri yang melangkah melalui serangkaian nilai clip-path: inset(...). Pada setiap keyframe, pita horizontal yang berbeda dari salinan berwarna terungkap sementara sisanya dipotong, sehingga pecahan merah (atau cyan) yang terlihat melompat secara vertikal saat animasi diputar — dikombinasikan dengan offset bayangan berwarna, ini terlihat seperti kanal warna yang robek dan tidak sejajar, bukan cahaya lembut.

Di mana efek ini cocok digunakan

• Judul hero pada halaman arahan bertema gaming, cyberpunk, streaming, atau merek musik.
• Halaman error / 404, di mana glitch memperkuat tema 'ada yang rusak'.
• Status hover atau focus pada judul atau logo untuk aksen singkat yang menarik perhatian.
• Status loading atau 'memproses', di mana glitch menyampaikan aktivitas sistem.
• Gunakan secukupnya pada teks isi — efek ini sengaja dibuat sulit dibaca sekilas, jadi paling cocok untuk judul pendek atau logotype, bukan paragraf.

Memadukan dengan alat CSS lainnya

Judul glitch sering kali hanya satu elemen dalam tata letak gelap dan berkontras tinggi yang lebih besar. Padukan dengan bayangan glow lembut atau sudut kartu membulat dari alat CSS lain di bawah ini untuk tampilan yang lebih lengkap.

→ Generator Box Shadow · Generator Border Radius

Pertanyaan yang Sering Diajukan