Balloon Puff

3D & Depth · Animated · pure CSS

Each letter is filled with an off-center radial gradient — a bright specular spot near the upper-left curving through a saturated hue down to a deep latex edge — for the unmistakable sheen of an inflated party balloon. A soft two-layer shadow floats well below each glyph for lift, while a gentle per-letter scale breathe, staggered by index, keeps the whole word subtly alive.

Open in the generator →All effects
Balloon Puff

How it works

Balloon Puff is an animated 3d & depth text effect rendered entirely in CSS. Each character is wrapped in its own span so it can animate independently — the HTML and JSX exports include that per-letter markup.

Controls

Balloon Puff exposes 3 dedicated controls — Balloon Hue, Breathe Speed and Gloss — 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

/* Balloon Puff — made with TEXT-FX · https://text-fx.app
 * HTML: each character is wrapped in a <span> — see the HTML export.
 * Font: 'Major Mono Display', monospace (load from Google Fonts).
 */

.text-effect {
  font-family: 'Major Mono Display', monospace;
  font-weight: 700;
  letter-spacing: 8px;
  text-transform: none;
}

.text-effect {
  white-space: pre;
}
.text-effect .fx-ch {
  display: inline-block;
  background: radial-gradient(135% 145% at 30% 24%,
      hsl(294 30% 89%) 0%,
      hsl(294 88% 70%) 23%,
      hsl(294 92% 50%) 58%,
      hsl(302 94% 30%) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 4px 3px hsl(294 30% 5% / 0.35)) drop-shadow(0 14px 12px hsl(294 25% 3% / 0.28));
  transform-origin: center;
  will-change: transform;
  animation: text-effect-puff 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.12s);
}

@keyframes text-effect-puff {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

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: 'Major Mono Display', monospace;
  font-weight: 700;
  letter-spacing: 8px;
  text-transform: none;
}

.text-effect {
  white-space: pre;
}
.text-effect .fx-ch {
  display: inline-block;
  background: radial-gradient(135% 145% at 30% 24%,
      hsl(294 30% 89%) 0%,
      hsl(294 88% 70%) 23%,
      hsl(294 92% 50%) 58%,
      hsl(302 94% 30%) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 4px 3px hsl(294 30% 5% / 0.35)) drop-shadow(0 14px 12px hsl(294 25% 3% / 0.28));
  transform-origin: center;
  will-change: transform;
  animation: text-effect-puff 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.12s);
}

@keyframes text-effect-puff {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
</style>

<div class="text-effect"><span class="fx-ch" style="--i:0;--n:9;--rev:8;--mid:4">Y</span><span class="fx-ch" style="--i:1;--n:9;--rev:7;--mid:4">o</span><span class="fx-ch" style="--i:2;--n:9;--rev:6;--mid:4">u</span><span class="fx-ch" style="--i:3;--n:9;--rev:5;--mid:4">r</span><span class="fx-ch" style="--i:4;--n:9;--rev:4;--mid:4"> </span><span class="fx-ch" style="--i:5;--n:9;--rev:3;--mid:4">t</span><span class="fx-ch" style="--i:6;--n:9;--rev:2;--mid:4">e</span><span class="fx-ch" style="--i:7;--n:9;--rev:1;--mid:4">x</span><span class="fx-ch" style="--i:8;--n:9;--rev:0;--mid:4">t</span></div>
Category
3D & Depth
Type
Animated
Browser support
background-clip:text (prefixed) + filter drop-shadow
Capabilities
perLetter

Related 3D & Depth effects