Generator Efek Glitch Teks CSS
Buat efek glitch teks CSS yang dianimasikan — pemisahan RGB kromatik, pita terpotong, jitter atau flicker — dengan teks, warna, ukuran, intensitas dan kecepatan Anda sendiri. Salin CSS + HTML yang sudah siap pakai.
Input
Muncul baik sebagai teks elemen maupun dalam atribut data-text-nya, yang dibaca oleh lapisan efek.
Efek pita terpotong melukis lapisannya dengan warna solid, jadi harus sesuai dengan latar belakang asli.
Seberapa jauh lapisan glitch dipindahkan, dalam piksel. Skalakan sesuai dengan ukuran font.
Panjang satu siklus animasi penuh (0,2-5 detik). Loop yang lebih pendek terasa lebih gila.
Output
Teks glitch Anda akan muncul di sini.
Efek yang dihasilkan secara nyata, terisolasi dalam Shadow DOM sehingga @keyframes benar-benar dianimasikan.
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-glitch-text-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"text": "GLITCH",
"effect": "chromatic",
"fontSize": "80",
"fontFamily": "mono",
"textColor": "#ffffff",
"bgColor": "#222222",
"glitchColor1": "#00ffff",
"glitchColor2": "#ff00ff",
"intensity": "4",
"duration": "1.5"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `css-glitch-text-generator` tool (CSS Glitch Text Effect Generator) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/css-glitch-text-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Generator Efek Glitch Teks CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.
| Biaya per panggilan API/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Apa yang dilakukan
Generator Efek Glitch Teks CSS membangun teks "glitch" yang dianimasikan — pemisahan RGB, pita yang sobek, tampilan VHS-error — sebagai snippet CSS + HTML yang mandiri. Ketik teks Anda, pilih salah satu dari empat efek, atur warna, ukuran, intensitas dan kecepatan loop, lalu salin dua blok ke dalam proyek Anda.
Tidak ada gambar, tidak ada file font, tidak ada JavaScript dan tidak ada perpustakaan animasi yang terlibat: seluruh efek adalah text-shadow, clip-path, transform dan loop CSS @keyframes.
Empat efek
- Pemisahan Kromatik — dua warna glitch bergeser di kedua sisi glyph pada setiap frame, menghasilkan tampilan cetak yang tidak terdaftar / anaglyph klasik. Halus pada intensitas rendah, agresif pada intensitas tinggi.
- Pita Terpotong — glitch yang nyata: dua salinan teks tambahan (digambar oleh
::beforedan::afterdari atributdata-text) diiris menjadi pita horizontal denganclip-path: inset()dan bergeser keluar dari register, sehingga irisan kata tampak lepas dan kembali. - Jitter & Skew — seluruh blok berguncang dan miring dalam langkah-langkah keras, dengan pemisahan warna berkedip masuk dan keluar. Bagus untuk 404 atau keadaan kesalahan.
- Flicker — kedipan lampu neon yang gagal: teks meredup dan menyala kembali pada jadwal yang tidak teratur dengan perdarahan warna di tepi.
Cara kerja intensitas
Intensitas adalah perpindahan, dalam piksel, yang setiap lapisan efek bergerak. Ini menskalakan offset text-shadow, offset left dari lapisan pita terpotong, dan jarak translate dari jitter. Sebagai aturan praktis, pertahankan intensitas sekitar 5% dari ukuran font Anda — sekitar 4px pada tipe 80px — kemudian dorong lebih tinggi untuk pahlawan dan lebih rendah untuk apa pun yang benar-benar Anda harapkan orang membaca.
Aksesibilitas gerakan
Gerakan yang cepat dan kontras tinggi adalah pemicu yang dikenal untuk migrain dan gejala vestibular, dan loop glitch adalah tentang cepat dan kontras tinggi seperti tipe web. Oleh karena itu, setiap snippet yang dihasilkan alat ini diakhiri dengan blok @media (prefers-reduced-motion: reduce) yang mengatur animation: none, sehingga teks kembali ke status statis yang bersih untuk siapa pun yang sistemnya meminta pengurangan gerakan. Pertahankan blok itu ketika Anda menempel CSS di.
Cara menggunakannya
- Masukkan Teks Anda. Ditulis baik sebagai teks elemen maupun ke dalam atribut
data-text-nya, yang dibaca lapisan Pita Terpotong. - Pilih Efek Glitch, kemudian atur Ukuran Font dan Font.
- Pilih warna: Teks, Latar Belakang, dan dua Warna Glitch (cyan/magenta adalah pasangan tradisional).
- Sesuaikan Intensitas dan Durasi Loop — loop yang lebih pendek terbaca lebih gila.
- Salin CSS ke dalam stylesheet Anda dan HTML ke dalam markup Anda.
FAQ
Mengapa snippet menetapkan warna latar belakang? Efek Pita Terpotong melukis dua lapisan duplikatnya dengan latar belakang solid sehingga irisan menutupi teks asli di bawahnya. Jika warna itu tidak sesuai dengan apa yang sebenarnya ada di belakang elemen, seam akan terlihat. Atur Warna Latar Belakang ke latar belakang halaman asli Anda — atau pertahankan latar belakang elemen sendiri, yang CSS yang dihasilkan terapkan untuk Anda.
Bisakah saya menggunakannya pada elemen yang ada alih-alih <div> yang dihasilkan?
Ya. Tambahkan class="io-glitch" dan atribut data-text yang menyimpan teks yang sama. Nilai data-text adalah apa yang lapisan efek duplikasi, jadi harus sesuai dengan teks yang terlihat atau robekan akan menunjukkan karakter yang salah.
Apakah itu berfungsi pada teks multi-baris? Efeknya dirancang untuk satu baris — judul, logotype, 404. Lapisan terpotong diposisikan terhadap kotak elemen, jadi paragraf panjang yang dibungkus akan terlihat tidak selaras.
Apakah ada yang diunggah? Tidak. Snippet dihasilkan di browser Anda dari nilai yang Anda masukkan; tidak ada yang dikirim ke server atau disimpan.
Alat terkait
Untuk efek tipe CSS murni lainnya, coba Generator CSS Teks Gradien. Jika Anda menginginkan karakter yang berglitch daripada styling yang berglitch — teks yang tetap rusak saat ditempel ke dalam chat atau bio — Generator Teks Zalgo melakukan itu dengan tanda penggabung Unicode alih-alih CSS. Untuk menulis kurva animasi bespoke Anda sendiri, gunakan Generator Animasi Keyframe CSS, dan kurangi stylesheet yang sudah selesai dengan CSS Minifier & Beautifier.