Sparkle Glints

Neon & Glow · Animated · pure CSS

Four-point star glints — crossed gradient rays around a white-hot core, screen-blended so they read as pure light — wink in and out at staggered spots across the word, timed so two or three are always sparkling. The letters keep a bright polished-metal fill, like diamond twinkle on jewelry lettering rather than a sweep or a texture.

Open in the generator →All effects
Sparkle Glints

How it works

Sparkle Glints is an animated neon & glow text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.

Controls

Sparkle Glints exposes 4 dedicated controls — Sparkle Hue, Sparkle Color, Count 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

/* Sparkle Glints — 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 {
  position: relative;
  background: linear-gradient(172deg,
    hsl(120 32% 90%) 0%,
    hsl(120 36% 66%) 38%,
    hsl(120 40% 42%) 52%,
    hsl(120 36% 70%) 64%,
    hsl(120 32% 92%) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.text-effect::before,
.text-effect::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background-repeat: no-repeat;
}
.text-effect::before {
  background-image:
    radial-gradient(circle, hsl(120 45% 98%) 0%, hsl(120 85% 80%) 30%, hsl(120 85% 66% / 0.7) 55%, transparent 76%),
    linear-gradient(90deg, transparent 0%, hsl(120 85% 66% / 0.7) 32%, hsl(120 45% 98%) 50%, hsl(120 85% 66% / 0.7) 68%, transparent 100%),
    linear-gradient(180deg, transparent 0%, hsl(120 85% 66% / 0.7) 32%, hsl(120 45% 98%) 50%, hsl(120 85% 66% / 0.7) 68%, transparent 100%),
    radial-gradient(circle, hsl(120 45% 98%) 0%, hsl(120 85% 80%) 30%, hsl(120 85% 66% / 0.7) 55%, transparent 76%),
    linear-gradient(90deg, transparent 0%, hsl(120 85% 66% / 0.7) 32%, hsl(120 45% 98%) 50%, hsl(120 85% 66% / 0.7) 68%, transparent 100%),
    linear-gradient(180deg, transparent 0%, hsl(120 85% 66% / 0.7) 32%, hsl(120 45% 98%) 50%, hsl(120 85% 66% / 0.7) 68%, transparent 100%),
    radial-gradient(circle, hsl(120 45% 98%) 0%, hsl(120 85% 80%) 30%, hsl(120 85% 66% / 0.7) 55%, transparent 76%),
    linear-gradient(90deg, transparent 0%, hsl(120 85% 66% / 0.7) 32%, hsl(120 45% 98%) 50%, hsl(120 85% 66% / 0.7) 68%, transparent 100%),
    linear-gradient(180deg, transparent 0%, hsl(120 85% 66% / 0.7) 32%, hsl(120 45% 98%) 50%, hsl(120 85% 66% / 0.7) 68%, transparent 100%);
  background-position: 9% 30%, 9% 30%, 9% 30%, 24% 74%, 24% 74%, 24% 74%, 41% 14%, 41% 14%, 41% 14%;
  animation: text-effect-glint-a 1.9s linear infinite;
}
.text-effect::after {
  background-image:
    radial-gradient(circle, hsl(120 45% 98%) 0%, hsl(120 85% 80%) 30%, hsl(120 85% 66% / 0.7) 55%, transparent 76%),
    linear-gradient(90deg, transparent 0%, hsl(120 85% 66% / 0.7) 32%, hsl(120 45% 98%) 50%, hsl(120 85% 66% / 0.7) 68%, transparent 100%),
    linear-gradient(180deg, transparent 0%, hsl(120 85% 66% / 0.7) 32%, hsl(120 45% 98%) 50%, hsl(120 85% 66% / 0.7) 68%, transparent 100%),
    radial-gradient(circle, hsl(120 45% 98%) 0%, hsl(120 85% 80%) 30%, hsl(120 85% 66% / 0.7) 55%, transparent 76%),
    linear-gradient(90deg, transparent 0%, hsl(120 85% 66% / 0.7) 32%, hsl(120 45% 98%) 50%, hsl(120 85% 66% / 0.7) 68%, transparent 100%),
    linear-gradient(180deg, transparent 0%, hsl(120 85% 66% / 0.7) 32%, hsl(120 45% 98%) 50%, hsl(120 85% 66% / 0.7) 68%, transparent 100%),
    radial-gradient(circle, hsl(120 45% 98%) 0%, hsl(120 85% 80%) 30%, hsl(120 85% 66% / 0.7) 55%, transparent 76%),
    linear-gradient(90deg, transparent 0%, hsl(120 85% 66% / 0.7) 32%, hsl(120 45% 98%) 50%, hsl(120 85% 66% / 0.7) 68%, transparent 100%),
    linear-gradient(180deg, transparent 0%, hsl(120 85% 66% / 0.7) 32%, hsl(120 45% 98%) 50%, hsl(120 85% 66% / 0.7) 68%, transparent 100%);
  background-position: 58% 66%, 58% 66%, 58% 66%, 76% 24%, 76% 24%, 76% 24%, 91% 70%, 91% 70%, 91% 70%;
  animation: text-effect-glint-b 1.9s linear infinite;
}

@keyframes text-effect-glint-a {
  0% { background-size: 0.62em 0.62em, 2.4em 0.2em, 0.2em 2.4em, 0.351em 0.351em, 1.36em 0.113em, 0.113em 1.36em, 0.015em 0.015em, 0.058em 0.005em, 0.005em 0.058em; }
  5.33% { background-size: 0.62em 0.62em, 2.4em 0.2em, 0.2em 2.4em, 0.516em 0.516em, 1.999em 0.167em, 0.167em 1.999em, 0.015em 0.015em, 0.058em 0.005em, 0.005em 0.058em; }
  5.67% { background-size: 0.62em 0.62em, 2.4em 0.2em, 0.2em 2.4em, 0.527em 0.527em, 2.04em 0.17em, 0.17em 2.04em, 0.015em 0.015em, 0.058em 0.005em, 0.005em 0.058em; }
  11% { background-size: 0.62em 0.62em, 2.4em 0.2em, 0.2em 2.4em, 0.527em 0.527em, 2.04em 0.17em, 0.17em 2.04em, 0.248em 0.248em, 0.961em 0.08em, 0.08em 0.961em; }
  22.33% { background-size: 0.207em 0.207em, 0.8em 0.067em, 0.067em 0.8em, 0.527em 0.527em, 2.04em 0.17em, 0.17em 2.04em, 0.744em 0.744em, 2.88em 0.24em, 0.24em 2.88em; }
  27.67% { background-size: 0.012em 0.012em, 0.048em 0.004em, 0.004em 0.048em, 0.527em 0.527em, 2.04em 0.17em, 0.17em 2.04em, 0.744em 0.744em, 2.88em 0.24em, 0.24em 2.88em; }
  28% { background-size: 0.012em 0.012em, 0.048em 0.004em, 0.004em 0.048em, 0.517em 0.517em, 2em 0.167em, 0.167em 2em, 0.744em 0.744em, 2.88em 0.24em, 0.24em 2.88em; }
  44.33% { background-size: 0.012em 0.012em, 0.048em 0.004em, 0.004em 0.048em, 0.011em 0.011em, 0.041em 0.003em, 0.003em 0.041em, 0.744em 0.744em, 2.88em 0.24em, 0.24em 2.88em; }
  44.67% { background-size: 0.012em 0.012em, 0.048em 0.004em, 0.004em 0.048em, 0.011em 0.011em, 0.041em 0.003em, 0.003em 0.041em, 0.729em 0.729em, 2.822em 0.235em, 0.235em 2.822em; }
  61.33% { background-size: 0.012em 0.012em, 0.048em 0.004em, 0.004em 0.048em, 0.011em 0.011em, 0.041em 0.003em, 0.003em 0.041em, 0.015em 0.015em, 0.058em 0.005em, 0.005em 0.058em; }
  72% { background-size: 0.012em 0.012em, 0.048em 0.004em, 0.004em 0.048em, 0.011em 0.011em, 0.041em 0.003em, 0.003em 0.041em, 0.015em 0.015em, 0.058em 0.005em, 0.005em 0.058em; }
  88.67% { background-size: 0.608em 0.608em, 2.353em 0.196em, 0.196em 2.353em, 0.011em 0.011em, 0.041em 0.003em, 0.003em 0.041em, 0.015em 0.015em, 0.058em 0.005em, 0.005em 0.058em; }
  89% { background-size: 0.62em 0.62em, 2.4em 0.2em, 0.2em 2.4em, 0.011em 0.011em, 0.041em 0.003em, 0.003em 0.041em, 0.015em 0.015em, 0.058em 0.005em, 0.005em 0.058em; }
  100% { background-size: 0.62em 0.62em, 2.4em 0.2em, 0.2em 2.4em, 0.351em 0.351em, 1.36em 0.113em, 0.113em 1.36em, 0.015em 0.015em, 0.058em 0.005em, 0.005em 0.058em; }
}

@keyframes text-effect-glint-b {
  0% { background-size: 0.011em 0.011em, 0.043em 0.004em, 0.004em 0.043em, 0.014em 0.014em, 0.053em 0.004em, 0.004em 0.053em, 0.393em 0.393em, 1.52em 0.127em, 0.127em 1.52em; }
  11.33% { background-size: 0.011em 0.011em, 0.043em 0.004em, 0.004em 0.043em, 0.014em 0.014em, 0.053em 0.004em, 0.004em 0.053em, 0.012em 0.012em, 0.046em 0.004em, 0.004em 0.046em; }
  22% { background-size: 0.011em 0.011em, 0.043em 0.004em, 0.004em 0.043em, 0.014em 0.014em, 0.053em 0.004em, 0.004em 0.053em, 0.012em 0.012em, 0.046em 0.004em, 0.004em 0.046em; }
  38.67% { background-size: 0.547em 0.547em, 2.118em 0.177em, 0.177em 2.118em, 0.014em 0.014em, 0.053em 0.004em, 0.004em 0.053em, 0.012em 0.012em, 0.046em 0.004em, 0.004em 0.046em; }
  39% { background-size: 0.558em 0.558em, 2.16em 0.18em, 0.18em 2.16em, 0.014em 0.014em, 0.053em 0.004em, 0.004em 0.053em, 0.012em 0.012em, 0.046em 0.004em, 0.004em 0.046em; }
  55.33% { background-size: 0.558em 0.558em, 2.16em 0.18em, 0.18em 2.16em, 0.668em 0.668em, 2.587em 0.216em, 0.216em 2.587em, 0.012em 0.012em, 0.046em 0.004em, 0.004em 0.046em; }
  55.67% { background-size: 0.558em 0.558em, 2.16em 0.18em, 0.18em 2.16em, 0.682em 0.682em, 2.64em 0.22em, 0.22em 2.64em, 0.012em 0.012em, 0.046em 0.004em, 0.004em 0.046em; }
  61% { background-size: 0.558em 0.558em, 2.16em 0.18em, 0.18em 2.16em, 0.682em 0.682em, 2.64em 0.22em, 0.22em 2.64em, 0.196em 0.196em, 0.76em 0.063em, 0.063em 0.76em; }
  72.33% { background-size: 0.186em 0.186em, 0.72em 0.06em, 0.06em 0.72em, 0.682em 0.682em, 2.64em 0.22em, 0.22em 2.64em, 0.589em 0.589em, 2.28em 0.19em, 0.19em 2.28em; }
  77.67% { background-size: 0.011em 0.011em, 0.043em 0.004em, 0.004em 0.043em, 0.682em 0.682em, 2.64em 0.22em, 0.22em 2.64em, 0.589em 0.589em, 2.28em 0.19em, 0.19em 2.28em; }
  78% { background-size: 0.011em 0.011em, 0.043em 0.004em, 0.004em 0.043em, 0.669em 0.669em, 2.589em 0.216em, 0.216em 2.589em, 0.589em 0.589em, 2.28em 0.19em, 0.19em 2.28em; }
  94.33% { background-size: 0.011em 0.011em, 0.043em 0.004em, 0.004em 0.043em, 0.014em 0.014em, 0.053em 0.004em, 0.004em 0.053em, 0.589em 0.589em, 2.28em 0.19em, 0.19em 2.28em; }
  94.67% { background-size: 0.011em 0.011em, 0.043em 0.004em, 0.004em 0.043em, 0.014em 0.014em, 0.053em 0.004em, 0.004em 0.053em, 0.577em 0.577em, 2.234em 0.186em, 0.186em 2.234em; }
  100% { background-size: 0.011em 0.011em, 0.043em 0.004em, 0.004em 0.043em, 0.014em 0.014em, 0.053em 0.004em, 0.004em 0.053em, 0.393em 0.393em, 1.52em 0.127em, 0.127em 1.52em; }
}

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

Category
Neon & Glow
Type
Animated
Browser support
Screen-blended background layers on ::before/::after (all modern browsers)
Capabilities
pure

Related Neon & Glow effects