Water Fill

How it works

Water Fill 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

Water Fill exposes 4 dedicated controls — Water Hue, Low Tide, High Tide 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

/* Water Fill — generated with TEXT-FX
 * HTML: just put the class on any element.
 * Font: 'Bungee', cursive (load from Google Fonts).
 */

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

.text-effect {
  font-family: 'Bungee', cursive;
  font-weight: 400;
  letter-spacing: 8px;
  text-transform: none;
}

.text-effect {
  --text-effect-level: 19%;
  -webkit-text-stroke: 1.5px hsl(204 40% 70% / 0.85);
  background: linear-gradient(to top, hsl(204 90% 40%) 0%, hsl(218 95% 62%) var(--text-effect-level), transparent var(--text-effect-level));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 10px hsl(204 90% 60% / 0.4));
  animation: text-effect-tide 4.2s ease-in-out infinite alternate;
}

@keyframes text-effect-tide {
  from { --text-effect-level: 19%; }
  to { --text-effect-level: 85%; }
}

Related Elemental & Nature effects

• Aurora
• Fire
• Gooey
• Ice
• Molten Lava