Bokeh Fill

Fill & Texture · Animated · pure CSS

A stack of large, feathered radial-gradient discs — the defocused circles-of-confusion of city lights through a wide-open lens — clipped into the glyphs over a dark backdrop. Each disc drifts at its own lazy pace and a couple breathe in size for a twinkle, warming to amber-and-white orbs on the light theme so the fill still reads as photographic.

Open in the generator →All effects
Bokeh Fill

How it works

Bokeh Fill is an animated fill & texture text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.

Controls

Bokeh Fill exposes 3 dedicated controls — Hue, Density and Drift 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

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

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

.text-effect {
  background:
    radial-gradient(circle at 24% 30%, hsl(34 88% 63% / 0.55) 0%, hsl(34 88% 63% / 0.28) 40%, transparent 76%),
    radial-gradient(circle at 70% 20%, hsl(7 62% 58% / 0.55) 0%, hsl(7 62% 58% / 0.28) 40%, transparent 76%),
    radial-gradient(circle at 82% 64%, hsl(46 20% 92% / 0.55) 0%, hsl(46 20% 92% / 0.28) 40%, transparent 76%),
    radial-gradient(circle at 40% 74%, hsl(47 62% 58% / 0.55) 0%, hsl(47 62% 58% / 0.28) 40%, transparent 76%),
    radial-gradient(circle at 14% 58%, hsl(34 88% 63% / 0.55) 0%, hsl(34 88% 63% / 0.28) 40%, transparent 76%),
    radial-gradient(circle at 58% 44%, hsl(312 62% 58% / 0.55) 0%, hsl(312 62% 58% / 0.28) 40%, transparent 76%),
    radial-gradient(circle at 90% 32%, hsl(34 88% 63% / 0.55) 0%, hsl(34 88% 63% / 0.28) 40%, transparent 76%),
    radial-gradient(circle at 30% 10%, hsl(46 20% 92% / 0.55) 0%, hsl(46 20% 92% / 0.28) 40%, transparent 76%),
    linear-gradient(160deg, hsl(7 42% 18%) 0%, hsl(32 38% 12%) 55%, hsl(57 34% 8%) 100%);
  background-repeat: no-repeat;
  background-size: 170% 170%, 150% 150%, 190% 190%, 140% 140%, 130% 130%, 160% 160%, 120% 120%, 135% 135%, 100% 100%;
  background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 0% 0%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 10px hsl(38 80% 60% / 0.42)) drop-shadow(0 0 26px hsl(38 80% 60% / 0.42));
  animation: text-effect-bokeh 15s ease-in-out infinite;
}

@keyframes text-effect-bokeh {
  0%, 100% { background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 0% 0%; background-size: 170% 170%, 150% 150%, 190% 190%, 140% 140%, 130% 130%, 160% 160%, 120% 120%, 135% 135%, 100% 100%; }
  50% { background-position: 59% 44%, 38% 58%, 57% 59%, 41% 39%, 61% 56%, 42% 43%, 56% 41%, 44% 58%, 0% 0%; background-size: 170% 170%, 183% 183%, 190% 190%, 171% 171%, 130% 130%, 160% 160%, 120% 120%, 135% 135%, 100% 100%; }
}

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

Category
Fill & Texture
Type
Animated
Browser support
background-clip:text (all modern, -webkit- prefixed)
Capabilities
pure

Related Fill & Texture effects