Molten Lava

How it works

Molten Lava is an animated elemental & nature text effect rendered entirely in CSS. It animates a registered CSS @property, which keeps the motion smooth and GPU-friendly.

Controls

Molten Lava exposes 2 dedicated controls — Heat Hue 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

/* Molten Lava — generated with TEXT-FX
 * HTML: just put the class on any element.
 * Font: 'Recursive', sans-serif (load from Google Fonts).
 */

@property --text-effect-pos {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 50%;
}

.text-effect {
  font-family: 'Recursive', sans-serif;
  font-weight: 700;
  letter-spacing: -2px;
  text-transform: none;
}

.text-effect {
  --text-effect-pos: 50%;
  background: radial-gradient(130% 130% at 50% var(--text-effect-pos), hsl(39 100% 78%) 0%, hsl(9 100% 55%) 38%, hsl(0 92% 26%) 74%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 8px hsl(9 100% 55% / 0.5)) drop-shadow(0 0 20px hsl(9 100% 55% / 0.5));
  animation: text-effect-flow 7.1s ease-in-out infinite alternate;
}

@keyframes text-effect-flow {
  from { --text-effect-pos: 18%; }
  to { --text-effect-pos: 82%; }
}

Related Elemental & Nature effects

• Aurora
• Fire
• Gooey
• Ice
• Water Fill