Particle Dissolve

Elemental & Nature · Animated · pure CSS

A Thanos-snap dissolve: an SVG displacement filter shatters the word into a fine drift of dust that scatters and lifts away, then re-forms, sitting legible for most of the loop. Pure CSS and SVG with SMIL-animated scale, blur, offset and alpha — a dramatic disintegrate-and-reassemble cycle.

Open in the generator →All effects
Particle Dissolve

How it works

Particle Dissolve is an animated elemental & nature 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

Particle Dissolve exposes 3 dedicated controls — Speed, Scatter and Drift — 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

/* Particle Dissolve — 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: 700;
  letter-spacing: 0px;
  text-transform: none;
}

.text-effect {
  color: hsl(28 12% 87%);
  filter: url(#text-effect-dissolve);
}

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: 700;
  letter-spacing: 0px;
  text-transform: none;
}

.text-effect {
  color: hsl(28 12% 87%);
  filter: url(#text-effect-dissolve);
}
</style>

<svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs>
<filter id="text-effect-dissolve" x="-75%" y="-75%" width="250%" height="250%" color-interpolation-filters="sRGB">
  <feTurbulence type="fractalNoise" baseFrequency="0.3" numOctaves="3" seed="7" result="dust"/>
  <feDisplacementMap in="SourceGraphic" in2="dust" scale="0" xChannelSelector="R" yChannelSelector="G" result="scatter">
    <animate attributeName="scale" dur="7.5s" keyTimes="0;0.34;0.52;0.6;0.82;1" values="0;0;87;87;0;0" repeatCount="indefinite"/>
  </feDisplacementMap>
  <feGaussianBlur in="scatter" stdDeviation="0" result="soft">
    <animate attributeName="stdDeviation" dur="7.5s" keyTimes="0;0.34;0.52;0.6;0.82;1" values="0;0;7.4;7.4;0;0" repeatCount="indefinite"/>
  </feGaussianBlur>
  <feOffset in="soft" dx="0" dy="0" result="cloud">
    <animate attributeName="dx" dur="7.5s" keyTimes="0;0.34;0.52;0.6;0.82;1" values="0;0;-19.6;-19.6;0;0" repeatCount="indefinite"/>
    <animate attributeName="dy" dur="7.5s" keyTimes="0;0.34;0.52;0.6;0.82;1" values="0;0;-33.9;-33.9;0;0" repeatCount="indefinite"/>
  </feOffset>
  <feComponentTransfer in="cloud">
    <feFuncA type="linear" slope="1" intercept="0">
      <animate attributeName="slope" dur="7.5s" keyTimes="0;0.34;0.52;0.6;0.82;1" values="1;1;0;0;1;1" repeatCount="indefinite"/>
    </feFuncA>
  </feComponentTransfer>
</filter>
</defs></svg>

<div class="text-effect">Your text</div>
Category
Elemental & Nature
Type
Animated
Browser support
SVG feTurbulence/feDisplacementMap dissolve, SMIL-animated (scale/blur/offset/alpha) via filter:url(#…)
Capabilities
pure, svgDefs

Related Elemental & Nature effects