C 🧠 Glitch Text Generator Glitch me! .glitch-text { position: relative; color: white; font-weight: bold; background: black; display: inline-block; padding: 10px 20px; overflow: hidden; animation: glitch 1s infinite; } .glitch-text::before, .glitch-text::after { content: attr(data-text); position: absolute; left: 0; width: 100%; height: 100%; overflow: hidden; } .glitch-text::before { top: -2px; left: 2px; color: #f0f; z-index: -1; animation: glitchTop 1s infinite; } .glitch-text::after { top: 2px; left: -2px; color: #0ff; z-index: -2; animation: glitchBottom 1s infinite; } @keyframes glitch { 0% { transform: none; } 20% { transform: skew(-2deg); } 40% { transform: skew(2deg); } 60% { transform: none; } 80% { transform: skew(1deg); } 100% { transform: none; } } @keyframes glitchTop { 0% { clip-path: inset(0 0 90% 0); } 50% { clip-path: inset(10% 0 40% 0); transform: translate(5px, -2px); } 100% { clip-path: inset(0 0 90% 0); } } @keyframes glitchBottom { 0% { clip-path: inset(90% 0 0 0); } 50% { clip-path: inset(60% 0 10% 0); transform: translate(-5px, 2px); } 100% { clip-path: inset(90% 0 0 0); } } function generateGlitch() { const input = document.getElementById("glitchInput").value || "Glitch me!"; const output = document.getElementById("glitchOutput"); output.setAttribute("data-text", input); output.textContent = input; }