Melting Text

The code

A glimpse of the source:

<div class="melt-text" id="meltText">
    <span style="animation-delay: 0s; color: hsl(260, 70%, 60%)">M</span>
    <span style="animation-delay: 0.1s; color: hsl(275, 70%, 60%)">E</span>
    <span style="animation-delay: 0.2s; color: hsl(290, 70%, 60%)">L</span>
    <span style="animation-delay: 0.30000000000000004s; color: hsl(305, 70%, 60%)">T</span>
    <span style="animation-delay: 0.4s; color: hsl(320, 70%, 60%)">I</span>
    <span style="animation-delay: 0.5s; color: hsl(335, 70%, 60%)">N</span>
    <span style="animation-delay: 0.6000000000000001s; color: hsl(350, 70%, 60%)">G</span>
  </div>
</div>

Concrete use cases

A few real contexts where Melting Text shines:

• A creative site intro
• A striking hero title
• A bold visual transition

How it works

CSS + a lightweight vanilla JavaScript script (no dependency). It relies on a @keyframes animation, CSS filters and CSS transforms.

Make it yours

You can tweak:

• animation speed (currently 2s)

Add it in 3 steps

1. Paste the HTML where you want the effect on your page.
2. Add the CSS to your stylesheet (or in a <style> tag).
3. Add the small JavaScript snippet before </body> — done.

Browser support

Works in every modern browser (Chrome, Firefox, Safari, Edge). Responsive, with graceful degradation.

More Distortion effects

FAQ