TV Static
Glitch & Distortion · Animated · pure CSS
An SVG feTurbulence noise, hard-thresholded to pure black-and-white speckle and composited only inside the letters, so the word reads like a dead channel wearing its own silhouette. A stepped seed animation crawls the snow frame-to-frame, with an optional rolling sync bar, a faint cool tint and a subtle brightness flicker.
How it works
TV Static is an animated glitch & distortion text effect rendered entirely in CSS. It relies on an inline SVG <defs> block (filters, gradients or clip-paths), which the HTML export carries alongside the CSS.
Controls
TV Static exposes 3 dedicated controls — Noise Scale, Crawl Speed and Roll Bar — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.
CSS
/* TV Static — made with TEXT-FX · https://text-fx.app
* HTML: requires the inline <svg> filter defs — see the HTML export.
* Font: 'Archivo Black', sans-serif (load from Google Fonts).
*/
.text-effect {
font-family: 'Archivo Black', sans-serif;
font-weight: 700;
letter-spacing: 2px;
text-transform: none;
}
.text-effect {
color: #000;
filter: url(#text-effect-static);
animation: text-effect-flick 3.6s linear infinite;
}
@keyframes text-effect-flick {
0%, 100% { opacity: 1; }
8% { opacity: 0.85; }
9% { opacity: 1; }
41% { opacity: 0.93; }
42% { opacity: 1; }
73% { opacity: 0.88; }
74% { opacity: 1; }
}
HTML
This effect needs the markup below (per-letter spans, SVG defs, or a data-text attribute).
<!-- Made with TEXT-FX · https://text-fx.app -->
<style>
.text-effect {
font-family: 'Archivo Black', sans-serif;
font-weight: 700;
letter-spacing: 2px;
text-transform: none;
}
.text-effect {
color: #000;
filter: url(#text-effect-static);
animation: text-effect-flick 3.6s linear infinite;
}
@keyframes text-effect-flick {
0%, 100% { opacity: 1; }
8% { opacity: 0.85; }
9% { opacity: 1; }
41% { opacity: 0.93; }
42% { opacity: 1; }
73% { opacity: 0.88; }
74% { opacity: 1; }
}
</style>
<svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs>
<filter id="text-effect-static" x="-4%" y="-4%" width="108%" height="108%" color-interpolation-filters="sRGB">
<feTurbulence type="fractalNoise" baseFrequency="0.712" numOctaves="2" seed="1" stitchTiles="stitch" result="noise">
<animate attributeName="seed" values="2;11;5;14;3;9;15;6;12;1;8;13;4;10;7;2" dur="0.71s" calcMode="discrete" repeatCount="indefinite"/>
</feTurbulence>
<feColorMatrix in="noise" type="matrix" values="0.34 0.33 0.33 0 0.05 0.34 0.33 0.33 0 0.05 0.34 0.33 0.33 0 0.05 0 0 0 0 1" result="gray"/>
<feComponentTransfer in="gray" result="snow">
<feFuncR type="discrete" tableValues="0 1"/>
<feFuncG type="discrete" tableValues="0 1"/>
<feFuncB type="discrete" tableValues="0 1"/>
</feComponentTransfer>
<feTurbulence type="fractalNoise" baseFrequency="0.0015 0.022" numOctaves="1" seed="3" result="rn">
<animate attributeName="seed" values="3;6;9;6;3" dur="8.3s" calcMode="linear" repeatCount="indefinite"/>
</feTurbulence>
<feColorMatrix in="rn" type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0.5 0 0 -0.12" result="band"/>
<feBlend in="snow" in2="band" mode="screen" result="lit"/>
<feComposite in="lit" in2="SourceGraphic" operator="in" result="clipped"/>
<feColorMatrix in="clipped" type="matrix" values="0.94 0 0 0 0 0 0.96 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
</filter>
</defs></svg>
<div class="text-effect">Your text</div>
- Category
- Glitch & Distortion
- Type
- Animated
- Browser support
- SVG feTurbulence snow (SMIL-animated seed) composited to text via filter:url(#…)
- Capabilities
- pure, svgDefs