Frost Creep

How it works

Frost Creep 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

Frost Creep exposes 3 dedicated controls — Frost Hue, Freeze Speed and Hold — 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

/* Frost Creep — 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 {
  position: relative;
  color: hsl(32 88% 66%);
}
.text-effect .fx-frost-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  filter: url(#text-effect-frost);
}
.text-effect .fx-frost {
  display: block;
  background: linear-gradient(165deg, hsl(198 55% 97%) 0%, hsl(198 72% 88%) 48%, hsl(198 82% 80%) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 0.6px hsl(198 40% 100% / 0.5);
  -webkit-mask-image: linear-gradient(105deg, #000 30%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.15) 55%, transparent 66%);
  mask-image: linear-gradient(105deg, #000 30%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.15) 55%, transparent 66%);
  -webkit-mask-size: 320% 100%;
  mask-size: 320% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: text-effect-freeze 9.5s ease-in-out infinite;
}

@keyframes text-effect-freeze {
  0% { -webkit-mask-position: 130% 0; mask-position: 130% 0; filter: drop-shadow(0 0 0 hsl(198 95% 80% / 0)); }
  30% { -webkit-mask-position: -30% 0; mask-position: -30% 0; filter: drop-shadow(0 0 9px hsl(198 95% 80% / 0.6)); }
  65% { -webkit-mask-position: -30% 0; mask-position: -30% 0; filter: drop-shadow(0 0 9px hsl(198 95% 80% / 0.6)); }
  100% { -webkit-mask-position: 130% 0; mask-position: 130% 0; filter: drop-shadow(0 0 0 hsl(198 95% 80% / 0)); }
}

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 {
  position: relative;
  color: hsl(32 88% 66%);
}
.text-effect .fx-frost-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  filter: url(#text-effect-frost);
}
.text-effect .fx-frost {
  display: block;
  background: linear-gradient(165deg, hsl(198 55% 97%) 0%, hsl(198 72% 88%) 48%, hsl(198 82% 80%) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 0.6px hsl(198 40% 100% / 0.5);
  -webkit-mask-image: linear-gradient(105deg, #000 30%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.15) 55%, transparent 66%);
  mask-image: linear-gradient(105deg, #000 30%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.15) 55%, transparent 66%);
  -webkit-mask-size: 320% 100%;
  mask-size: 320% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: text-effect-freeze 9.5s ease-in-out infinite;
}

@keyframes text-effect-freeze {
  0% { -webkit-mask-position: 130% 0; mask-position: 130% 0; filter: drop-shadow(0 0 0 hsl(198 95% 80% / 0)); }
  30% { -webkit-mask-position: -30% 0; mask-position: -30% 0; filter: drop-shadow(0 0 9px hsl(198 95% 80% / 0.6)); }
  65% { -webkit-mask-position: -30% 0; mask-position: -30% 0; filter: drop-shadow(0 0 9px hsl(198 95% 80% / 0.6)); }
  100% { -webkit-mask-position: 130% 0; mask-position: 130% 0; filter: drop-shadow(0 0 0 hsl(198 95% 80% / 0)); }
}
</style>

<svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs>
<filter id="text-effect-frost" x="-30%" y="-30%" width="160%" height="160%" color-interpolation-filters="sRGB">
  <feTurbulence type="fractalNoise" baseFrequency="0.015 0.02" numOctaves="2" seed="4" result="warp"/>
  <feDisplacementMap in="SourceGraphic" in2="warp" scale="6" xChannelSelector="R" yChannelSelector="G" result="disp"/>
  <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed="9" stitchTiles="stitch" result="grain"/>
  <feColorMatrix in="grain" type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.35 0" result="frostGrain"/>
  <feComposite in="frostGrain" in2="disp" operator="in" result="grained"/>
  <feMerge>
    <feMergeNode in="disp"/>
    <feMergeNode in="grained"/>
  </feMerge>
</filter>
</defs></svg>

<div class="text-effect">Your text<span class="fx-frost-wrap" aria-hidden="true"><span class="fx-frost">Your text</span></span></div>

Related Elemental & Nature effects

• Aurora
• Fire
• Gooey
• Ice
• Water Fill