20 CSS Gradient Text Designs 19 / 20

CSS Glitter Sparkle Gradient Text Effect

Gold-pink-violet gradient text paired with animating spark particles via absolute-positioned siblings and staggered scale/opacity keyframes recreates the glitter foil aesthetic.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="gt-19">
  <span class="gt-19__label">Glitter sparkle gradient</span>
  <div style="position:relative; display:inline-block;">
    <div class="gt-19__glitter">SPARKLE</div>
    <div class="gt-19__sparks">
      <div class="gt-19__spark"></div>
      <div class="gt-19__spark"></div>
      <div class="gt-19__spark"></div>
      <div class="gt-19__spark"></div>
      <div class="gt-19__spark"></div>
      <div class="gt-19__spark"></div>
      <div class="gt-19__spark"></div>
      <div class="gt-19__spark"></div>
      <div class="gt-19__spark"></div>
      <div class="gt-19__spark"></div>
    </div>
  </div>
  <p class="gt-19__sub">GLITTER · SHIMMER · GLOW</p>
  <div class="gt-19__row">
    <span class="gt-19__gem">✦ GOLD ✦</span>
    <span class="gt-19__gem">✦ PINK ✦</span>
    <span class="gt-19__gem">✦ VIOLET ✦</span>
  </div>
</div>
.gt-19, .gt-19 *, .gt-19 *::before, .gt-19 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.gt-19 {
  --bg: #0d0015;
  --g1: #ffd700;
  --g2: #ff69b4;
  --g3: #da70d6;
  --g4: #ff6347;
  font-family: 'Paytone One', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 3rem 2rem;
  position: relative;
  overflow: hidden;
}
.gt-19__label {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #3a1040;
  font-family: monospace;
}
.gt-19__glitter {
  font-size: clamp(3rem, 12vw, 8rem);
  line-height: 1;
  letter-spacing: .04em;
  position: relative;
  display: inline-block;
  background: linear-gradient(135deg,
    var(--g1) 0%, var(--g2) 25%,
    var(--g3) 50%, var(--g4) 75%, var(--g1) 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-19-glitter 3s ease-in-out infinite;
  filter: drop-shadow(0 0 6px #ffd70060) drop-shadow(0 0 20px #ff69b440);
}
/* Sparkle particles via pseudo elements on sibling spans */
.gt-19__sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.gt-19__spark {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 40%, #ffd70060 100%);
  animation: gt-19-spark 2s ease-in-out infinite;
}
/* Position sparks around the text area */
.gt-19__spark:nth-child(1)  { top: 10%; left: 5%;   animation-delay: 0s;    width:6px; height:6px; }
.gt-19__spark:nth-child(2)  { top: 20%; left: 80%;  animation-delay: -.4s;  }
.gt-19__spark:nth-child(3)  { top: 70%; left: 15%;  animation-delay: -.8s;  width:5px; height:5px; }
.gt-19__spark:nth-child(4)  { top: 80%; left: 90%;  animation-delay: -1.2s; }
.gt-19__spark:nth-child(5)  { top: 40%; left: 95%;  animation-delay: -1.6s; width:3px; height:3px; }
.gt-19__spark:nth-child(6)  { top: 50%; left: 2%;   animation-delay: -0.2s; }
.gt-19__spark:nth-child(7)  { top: 5%;  left: 50%;  animation-delay: -0.6s; width:5px; height:5px; }
.gt-19__spark:nth-child(8)  { top: 90%; left: 50%;  animation-delay: -1s;   }
.gt-19__spark:nth-child(9)  { top: 30%; left: 30%;  animation-delay: -1.4s; width:3px; height:3px; }
.gt-19__spark:nth-child(10) { top: 60%; left: 70%;  animation-delay: -1.8s; width:6px; height:6px; }
.gt-19__sub {
  font-family: monospace;
  font-size: clamp(.7rem, 2vw, 1rem);
  letter-spacing: .25em;
  background: linear-gradient(90deg, var(--g1), var(--g3), var(--g2));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-19-flow 4s linear infinite;
}
.gt-19__row {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}
.gt-19__gem {
  font-size: clamp(1.2rem, 4vw, 2rem);
  background: linear-gradient(135deg, var(--g1), var(--g3));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-19-glitter 2.5s ease-in-out infinite;
  filter: drop-shadow(0 0 4px #ffd70050);
}
.gt-19__gem:nth-child(2) { animation-delay: -.6s; background-image: linear-gradient(135deg, var(--g2), var(--g4)); }
.gt-19__gem:nth-child(3) { animation-delay: -1.2s; background-image: linear-gradient(135deg, var(--g3), var(--g1)); }
@keyframes gt-19-glitter {
  0%, 100% {
    background-position: 0% 0%;
    filter: drop-shadow(0 0 6px #ffd70060) drop-shadow(0 0 20px #ff69b440);
  }
  50% {
    background-position: 100% 100%;
    filter: drop-shadow(0 0 12px #ffd700a0) drop-shadow(0 0 40px #ff69b480);
  }
}
@keyframes gt-19-spark {
  0%, 100% { transform: scale(1); opacity: .8; }
  50%       { transform: scale(1.8) rotate(45deg); opacity: 0; }
}
@keyframes gt-19-flow {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@media (prefers-reduced-motion: reduce) {
  .gt-19__glitter, .gt-19__spark, .gt-19__sub, .gt-19__gem { animation: none; filter: none; }
}

How this works

The headline uses a linear-gradient(135deg, gold → pink → violet → coral) clipped to text with background-size: 200% 200% animating diagonally. A filter: drop-shadow pulse on the same keyframe cycle makes the gradient text appear to glow and dim like real glitter catching light at different angles.

Ten span.gt-19__spark elements are positioned absolutely around the text area at hardcoded coordinates. Each runs the gt-19-spark keyframe that oscillates between scale(1) and scale(1.8) rotate(45deg) while fading opacity to 0. Staggered delays between 0s and -1.8s ensure sparks are always in different phases, creating the impression of random glitter glinting.

Customize

  • Move spark positions by editing the top and left percentages on each nth-child rule to cluster sparkles near specific letter areas.
  • Increase glitter density by adding more .gt-19__spark elements in the HTML and extending the nth-child delay ladder in CSS.
  • Change the sparkle shape from a circle to a four-point star using clip-path: polygon(...) on .gt-19__spark for a more jewel-like glitter facet.

Watch out for

  • Absolute-positioned spark elements require their parent container to have position: relative — wrapping both the headline and sparks in a shared relative container is the cleanest approach.
  • Multiple simultaneous filter: drop-shadow animations on the headline plus ten animating spark elements can overwhelm integrated GPU on older mobile devices — consider reducing spark count to five on mobile via a media query.
  • The sparkle scale animation uses transform-origin: center by default — change to specific percentage values if sparks need to radiate from a directional point.

Browser support

ChromeSafariFirefoxEdge
57+ 10.1+ 49+ 57+

All animations use transform and opacity — compositor-safe in all modern browsers; drop-shadow filter pulse may show minor frame drops on very old mobile hardware.

More from 20 CSS Gradient Text Designs

CSS Hover Reveal Gradient Text EffectCSS Toggle Switch Gradient Text Colour PickerCSS Crystalline Prism Gradient TextCSS Scroll Gradient Text Reveal on ScrollCSS Click Ripple Gradient Text InteractionCSS Cursor-Tracked Radial Gradient TextCSS Typewriter Loop Gradient Text AnimationCSS Animated Gradient Text FlowCSS Aurora Borealis Gradient Text SweepCSS Conic Gradient Text Hue SpinCSS Rainbow Wave Per-Letter Gradient TextCSS Lava Lamp Radial Gradient Text
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →