{
CF
}
Code
Fronts
Back to CSS Hero Sections
Glitch Text Hero
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.hs-glh { position: relative; width: 100%; min-height: clamp(240px, 32vh, 100vh); padding: clamp(20px, 4vh, 60px) clamp(16px, 4vw, 40px); background: #06060c; display: flex; align-items: center; justify-content: center; overflow: hidden; font-family: 'Courier New', monospace; color: #f0eeff; text-align: center; } .hs-glh-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(255,255,255,0.025) 2px, rgba(255,255,255,0.025) 3px); pointer-events: none; z-index: 1; } .hs-glh-c { position: relative; z-index: 2; max-width: 600px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .hs-glh-eye { font-size: clamp(9px, 1.3vw, 12px); letter-spacing: 0.12em; color: #2eb88a; border: 1px solid rgba(46,184,138,0.4); padding: 3px 10px; } .hs-glh-h { margin: 0; position: relative; font-size: clamp(36px, 10vw, 120px); font-weight: 900; line-height: 1; letter-spacing: -0.04em; color: #fff; } .hs-glh-h::before, .hs-glh-h::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; } .hs-glh-h::before { color: #ff6c8a; mix-blend-mode: screen; animation: hs-glh-r 3s steps(2, end) infinite; } .hs-glh-h::after { color: #3de8f5; mix-blend-mode: screen; animation: hs-glh-c 3s steps(2, end) infinite; } .hs-glh p { margin: 0; font-family: monospace; font-size: clamp(10px, 1.4vw, 13px); color: #b8b6d4; } .hs-glh-cta { padding: 9px 18px; background: transparent; color: #2eb88a; border: 1.5px solid #2eb88a; font-size: clamp(11px, 1.4vw, 13px); font-weight: 700; letter-spacing: 0.12em; text-decoration: none; margin-top: 4px; transition: background 0.15s, color 0.15s, box-shadow 0.15s; } .hs-glh-cta:hover { background: #2eb88a; color: #06060c; box-shadow: 0 0 30px rgba(46,184,138,0.6); } @keyframes hs-glh-r { 0%, 100% { transform: translate(0, 0); opacity: 0; } 20% { transform: translate(-3px, 1px); opacity: 0.85; } 40% { transform: translate(2px, -1px); opacity: 0.7; } 60% { transform: translate(-1px, 2px); opacity: 0; } } @keyframes hs-glh-c { 0%, 100% { transform: translate(0, 0); opacity: 0; } 20% { transform: translate(2px, -1px); opacity: 0.7; } 40% { transform: translate(-2px, 1px); opacity: 0.85; } 60% { transform: translate(1px, -2px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .hs-glh-h::before, .hs-glh-h::after { animation: none; opacity: 0; } }
<section class="hs-glh"> <div class="hs-glh-scan" aria-hidden="true"></div> <div class="hs-glh-c"> <span class="hs-glh-eye">[ SYS // ONLINE ]</span> <h1 class="hs-glh-h" data-text="REWIRED.">REWIRED.</h1> <p>The next interface speaks in protocols, not pixels.</p> <a class="hs-glh-cta" href="#">[ ENTER → ]</a> </div> </section>
Live preview
Ready