Datamosh Smear

How it works

Datamosh Smear 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

Datamosh Smear exposes 3 dedicated controls — Burst Force, Burst Rate and Hue Skew — 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

/* Datamosh Smear — made with TEXT-FX · https://text-fx.app
 * HTML: requires the inline <svg> filter defs — see the HTML export.
 * Font: 'Space Mono', monospace (load from Google Fonts).
 */

.text-effect {
  font-family: 'Space Mono', monospace;
  font-weight: 400;
  letter-spacing: 0px;
  text-transform: none;
}

.text-effect {
  color: #eef1f4;
  filter: url(#text-effect-mosh);
}

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: 'Space Mono', monospace;
  font-weight: 400;
  letter-spacing: 0px;
  text-transform: none;
}

.text-effect {
  color: #eef1f4;
  filter: url(#text-effect-mosh);
}
</style>

<svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs>
<filter id="text-effect-mosh" x="-50%" y="-50%" width="200%" height="200%" color-interpolation-filters="sRGB">
  <feTurbulence type="turbulence" baseFrequency="0.01 0.14" numOctaves="1" seed="2" result="noise">
    <animate attributeName="seed" dur="3.25s" keyTimes="0;0.0923;0.1477;0.2031;0.2538;0.323;0.3784;0.443;0.4984;0.5538;0.84;0.865;0.885;0.905;1" values="2;7;12;17;3;8;13;18;4;9;14;0;5;10;15" calcMode="discrete" repeatCount="indefinite"/>
  </feTurbulence>
  <feDisplacementMap in="SourceGraphic" in2="noise" scale="7.5" xChannelSelector="R" yChannelSelector="G" result="smear">
    <animate attributeName="scale" dur="3.25s" keyTimes="0;0.0923;0.1477;0.2031;0.2538;0.323;0.3784;0.443;0.4984;0.5538;0.84;0.865;0.885;0.905;1" values="7.5;34;13.6;30.6;6.8;23.8;34;11.9;28.9;0;30.6;10.2;25.5;0;0" calcMode="discrete" repeatCount="indefinite"/>
  </feDisplacementMap>
  <feFlood flood-color="hsl(72 96% 62%)" flood-opacity="0.158" result="flood">
    <animate attributeName="flood-opacity" dur="3.25s" keyTimes="0;0.0923;0.1477;0.2031;0.2538;0.323;0.3784;0.443;0.4984;0.5538;0.84;0.865;0.885;0.905;1" values="0.158;0.72;0.288;0.648;0.144;0.504;0.72;0.252;0.612;0;0.648;0.216;0.54;0;0" calcMode="discrete" repeatCount="indefinite"/>
  </feFlood>
  <feComposite in="flood" in2="smear" operator="in" result="ghost0"/>
  <feOffset in="ghost0" dx="3.7" dy="0" result="ghost">
    <animate attributeName="dx" dur="3.25s" keyTimes="0;0.0923;0.1477;0.2031;0.2538;0.323;0.3784;0.443;0.4984;0.5538;0.84;0.865;0.885;0.905;1" values="3.7;-17;6.8;-15.3;3.4;-11.9;17;-5.9;14.5;0;15.3;-5.1;12.8;0;0" calcMode="discrete" repeatCount="indefinite"/>
  </feOffset>
  <feMerge>
    <feMergeNode in="ghost"/>
    <feMergeNode in="smear"/>
  </feMerge>
</filter>
</defs></svg>

<div class="text-effect">Your text</div>

Related Glitch & Distortion effects

• Glitch
• Scanline Glitch
• Shake Glitch
• VHS
• Block Glitch