Liquid Lens

Metallic & Holographic · Animated · pure CSS

The glyphs become clear liquid-glass lenses that refract whatever sits behind them — an SVG clipPath of the word clips a backdrop-filtered layer, so the stage blurs and saturates through the letterforms. A specular top edge, a dark bottom edge for lens thickness, a faint rim stroke and a slow sheen sweep sell the glass, while a tint control guarantees visible body even on flat backdrops.

Open in the generator →All effects
Liquid Lens

How it works

Liquid Lens is an animated metallic & holographic 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

Liquid Lens exposes 5 dedicated controls — Refraction, Tint Hue, Tint, Rim and Shimmer — 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

/* Liquid Lens — 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: 4px;
  text-transform: none;
}

.text-effect {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  line-height: 1.1;
  color: transparent;
}
.text-effect .lens-svg {
  position: absolute;
  width: 0;
  height: 0;
}
.text-effect .lens-body,
.text-effect .lens-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-clip-path: url(#text-effect-lens);
  clip-path: url(#text-effect-lens);
}
.text-effect .lens-body {
  background: linear-gradient(180deg, hsl(82 62% 88% / 0.407), hsl(82 55% 74% / 0.313));
  -webkit-backdrop-filter: blur(1.2px) saturate(1.4) brightness(1.35);
  backdrop-filter: blur(1.2px) saturate(1.4) brightness(1.35);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.42)) drop-shadow(0 -0.5px 0 rgba(255,255,255,0.558)) drop-shadow(0 0.6px 0 rgba(4,8,16,0.310)) drop-shadow(0 0 0.7px rgba(255,255,255,0.310));
}
.text-effect .lens-sheen {
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.28) 50%, transparent 62%), linear-gradient(180deg, rgba(255,255,255,0.72) 0%, transparent 42%, transparent 72%, rgba(6,10,18,0.45) 100%);
  background-size: 250% 100%, auto;
  background-position: 130% 0, 0 0;
  animation: text-effect-sheen 4.6s linear infinite;
}

@keyframes text-effect-sheen {
  from { background-position: 130% 0, 0 0; }
  to { background-position: -30% 0, 0 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: 4px;
  text-transform: none;
}

.text-effect {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  line-height: 1.1;
  color: transparent;
}
.text-effect .lens-svg {
  position: absolute;
  width: 0;
  height: 0;
}
.text-effect .lens-body,
.text-effect .lens-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-clip-path: url(#text-effect-lens);
  clip-path: url(#text-effect-lens);
}
.text-effect .lens-body {
  background: linear-gradient(180deg, hsl(82 62% 88% / 0.407), hsl(82 55% 74% / 0.313));
  -webkit-backdrop-filter: blur(1.2px) saturate(1.4) brightness(1.35);
  backdrop-filter: blur(1.2px) saturate(1.4) brightness(1.35);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.42)) drop-shadow(0 -0.5px 0 rgba(255,255,255,0.558)) drop-shadow(0 0.6px 0 rgba(4,8,16,0.310)) drop-shadow(0 0 0.7px rgba(255,255,255,0.310));
}
.text-effect .lens-sheen {
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.28) 50%, transparent 62%), linear-gradient(180deg, rgba(255,255,255,0.72) 0%, transparent 42%, transparent 72%, rgba(6,10,18,0.45) 100%);
  background-size: 250% 100%, auto;
  background-position: 130% 0, 0 0;
  animation: text-effect-sheen 4.6s linear infinite;
}

@keyframes text-effect-sheen {
  from { background-position: 130% 0, 0 0; }
  to { background-position: -30% 0, 0 0; }
}
</style>

<div class="text-effect">Your text<svg class="lens-svg" width="0" height="0" aria-hidden="true"><clipPath id="text-effect-lens" clipPathUnits="userSpaceOnUse"><text x="0" y="0.85em">Your text</text></clipPath></svg><span class="lens-body"></span><span class="lens-sheen"></span></div>
Category
Metallic & Holographic
Type
Animated
Browser support
backdrop-filter (all modern) — the letters refract the backdrop behind them
Capabilities
svgDefs

Related Metallic & Holographic effects