Condensation Wipe

Elemental & Nature · Animated · pure CSS

A self-contained fogged-window panel where the same colourful gradient-mesh scene is painted twice — heavily blurred behind a milky haze for the misted glass, and razor-sharp clipped to the glyphs so the letters read as finger-wiped clear streaks. Crisp multi-box-shadow condensation beads dot the surface while gradient-tail drips trickle down on staggered slow loops, reading on both dark and light themes.

Open in the generator →All effects
Condensation Wipe

How it works

Condensation Wipe is an animated elemental & nature text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.

Controls

Condensation Wipe exposes 5 dedicated controls — Mesh Hue, Fog Blur, Fog Density, Drips and Trickle — 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

/* Condensation Wipe — made with TEXT-FX · https://text-fx.app
 * HTML: just put the class on any element.
 * Font: 'Unbounded', sans-serif (load from Google Fonts).
 */

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

.text-effect {
  position: relative;
  display: inline-block;
  isolation: isolate;
  overflow: hidden;
  padding: 0.42em 0.8em;
  border-radius: 22px;
  background: hsl(211 26% 91%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 1.5px rgba(255,255,255,.14), 0 22px 50px rgba(0,0,0,.45);
}
.text-effect .fx-fog {
  position: absolute;
  inset: -30px;
  z-index: 1;
  background:
    linear-gradient(160deg, hsl(212 26% 94% / 0.6), hsl(210 26% 88% / 0.48) 55%, hsl(214 26% 96% / 0.6)),
    radial-gradient(38% 46% at 22% 30%, hsl(144 85% 62%) 0%, transparent 60%),
    radial-gradient(42% 50% at 78% 26%, hsl(186 88% 64%) 0%, transparent 62%),
    radial-gradient(46% 54% at 30% 82%, hsl(309 70% 56%) 0%, transparent 60%),
    radial-gradient(50% 58% at 82% 78%, hsl(349 80% 62%) 0%, transparent 62%),
    radial-gradient(60% 70% at 50% 50%, hsl(74 76% 60%) 0%, transparent 70%),
    linear-gradient(120deg, hsl(19 45% 18%), hsl(69 52% 22%));
  background-size: 100% 100%, 130% 130%;
  background-position: center, center;
  filter: blur(19px) saturate(1.15);
  pointer-events: none;
}
.text-effect .fx-beads {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image:
    radial-gradient(circle at 31px 27px, rgba(255,255,255,.98) 1.5px, rgba(255,255,255,.85) 3.4px, rgba(30, 46, 84, 0.5) 5px, transparent 6.2px),
    radial-gradient(circle at 108px 71px, rgba(255,255,255,.98) 1.2px, rgba(255,255,255,.85) 2.7px, rgba(30, 46, 84, 0.5) 4.3px, transparent 5.5px),
    radial-gradient(circle at 71px 103px, rgba(255,255,255,.98) 1.8px, rgba(255,255,255,.85) 4px, rgba(30, 46, 84, 0.5) 5.6px, transparent 6.8px),
    radial-gradient(circle at 143px 23px, rgba(255,255,255,.98) 1px, rgba(255,255,255,.85) 2.3px, rgba(30, 46, 84, 0.5) 3.9px, transparent 5.1px),
    radial-gradient(circle at 22px 87px, rgba(255,255,255,.98) 1.4px, rgba(255,255,255,.85) 3px, rgba(30, 46, 84, 0.5) 4.6px, transparent 5.8px),
    radial-gradient(circle at 87px 47px, rgba(255,255,255,.98) 1.1px, rgba(255,255,255,.85) 2.5px, rgba(30, 46, 84, 0.5) 4.1px, transparent 5.3px);
  background-size: 137px 89px, 163px 109px, 119px 127px, 187px 97px, 149px 141px, 173px 79px;
  pointer-events: none;
}
.text-effect .fx-drip {
  position: absolute;
  top: -0.55em;
  left: var(--x);
  width: 0.085em;
  height: 0.55em;
  z-index: 3;
  border-radius: 0 0 0.085em 0.085em;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.88));
  filter: drop-shadow(0 1px 1px rgba(30, 46, 84, 0.5));
  animation: text-effect-trickle var(--dur) linear var(--d) infinite;
  pointer-events: none;
}
.text-effect .fx-drip::after {
  content: "";
  position: absolute;
  left: -0.042em;
  bottom: -0.09em;
  width: 0.17em;
  height: 0.17em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.98) 20%, rgba(255,255,255,.8) 52%, rgba(30, 46, 84, 0.5) 78%, transparent 100%);
}
.text-effect .fx-wipe {
  position: relative;
  z-index: 4;
  display: inline-block;
  background:
    radial-gradient(38% 46% at 22% 30%, hsl(144 85% 62%) 0%, transparent 60%),
    radial-gradient(42% 50% at 78% 26%, hsl(186 88% 64%) 0%, transparent 62%),
    radial-gradient(46% 54% at 30% 82%, hsl(309 70% 56%) 0%, transparent 60%),
    radial-gradient(50% 58% at 82% 78%, hsl(349 80% 62%) 0%, transparent 62%),
    radial-gradient(60% 70% at 50% 50%, hsl(74 76% 60%) 0%, transparent 70%),
    linear-gradient(120deg, hsl(19 45% 18%), hsl(69 52% 22%));
  background-size: 130% 130%;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: saturate(1.65) contrast(1.12) drop-shadow(0 2px 2px rgba(10,6,24,.55)) drop-shadow(0 -1px 0 rgba(255,255,255,.6));
}

@keyframes text-effect-trickle {
  0% { transform: translateY(0); opacity: 0; }
  6% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateY(2.7em); opacity: 0; }
}

Pure CSS — just add the .text-effect class to any element.

Category
Elemental & Nature
Type
Animated
Browser support
background-clip:text through a blurred gradient-mesh fog panel + tiled radial-gradient droplets
Capabilities
pure

Related Elemental & Nature effects