Melt Drip

Elemental & Nature · Animated · pure CSS

A masked copy of the word oozes downward and fades on a loop, so the letters look like they're slowly melting off the baseline.

Open in the generator →All effects
Melt Drip

How it works

Melt Drip is an animated elemental & nature text effect rendered entirely in CSS. A data-text attribute mirrors the word into ::before/::after layers, so copy that attribute together with the CSS.

Controls

Melt Drip exposes 3 dedicated controls — Hue, Drip and Speed — 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

/* Melt Drip — generated with TEXT-FX
 * HTML: the element needs a data-text attribute equal to its text.
 * Font: 'Syne', sans-serif (load from Google Fonts).
 */

.text-effect {
  font-family: 'Syne', sans-serif;
  font-weight: 900;
  letter-spacing: 8px;
  text-transform: none;
}

.text-effect {
  position: relative;
  color: hsl(107 85% 64%);
}
.text-effect::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: hsl(107 90% 56%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 52%, #000 78%);
  mask-image: linear-gradient(to bottom, transparent 52%, #000 78%);
  pointer-events: none;
  animation: text-effect-ooze 4.5s ease-in infinite;
}

@keyframes text-effect-ooze {
  0% { transform: translateY(0); opacity: 0.85; }
  100% { transform: translateY(0.42em); opacity: 0; }
}

HTML

This effect needs the markup below (per-letter spans, SVG defs, or a data-text attribute).

<style>
.text-effect {
  font-family: 'Syne', sans-serif;
  font-weight: 900;
  letter-spacing: 8px;
  text-transform: none;
}

.text-effect {
  position: relative;
  color: hsl(107 85% 64%);
}
.text-effect::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: hsl(107 90% 56%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 52%, #000 78%);
  mask-image: linear-gradient(to bottom, transparent 52%, #000 78%);
  pointer-events: none;
  animation: text-effect-ooze 4.5s ease-in infinite;
}

@keyframes text-effect-ooze {
  0% { transform: translateY(0); opacity: 0.85; }
  100% { transform: translateY(0.42em); opacity: 0; }
}
</style>

<div data-text="Your text" class="text-effect">Your text</div>
Category
Elemental & Nature
Type
Animated
Browser support
data-text copy masked to its base, animated downward
Capabilities
dataText

Related Elemental & Nature effects