Design Atlas
한국어
✦ Visual effects

Sparkles

스파클

Small star shapes that pop in and fade out at random positions and timing around a piece of text or an element.

Also known as: Text sparklesTwinkle particles
···
html
<div class="stage" id="st"><h1>Magic ✦ Text</h1></div>
css
.stage{position:relative;display:grid;place-items:center;width:100%;height:100%}
.stage h1{position:relative;margin:0;color:#fff;font-size:clamp(22px,6vmin,32px);font-weight:700}
.spark{position:absolute;width:12px;height:12px;pointer-events:none;
  background:radial-gradient(circle,#fff 0%,transparent 70%);
  clip-path:polygon(50% 0%,63% 38%,100% 50%,63% 62%,50% 100%,37% 62%,0% 50%,37% 38%)}
js
const stage = document.getElementById('st');
function spawn() {
  const s = document.createElement('div');
  s.className = 'spark';
  const size = 6 + Math.random() * 10;
  s.style.width = s.style.height = size + 'px';
  s.style.left = (Math.random() * 90 + 2) + '%';
  s.style.top = (Math.random() * 80 + 5) + '%';
  s.style.background = Math.random() > 0.5 ? 'radial-gradient(circle,#fff 0%,transparent 70%)' : 'radial-gradient(circle,#ffd27a 0%,transparent 70%)';
  stage.appendChild(s);
  const anim = s.animate(
    [
      { transform: 'scale(0) rotate(0deg)', opacity: 0 },
      { transform: 'scale(1) rotate(45deg)', opacity: 1, offset: 0.4 },
      { transform: 'scale(0) rotate(90deg)', opacity: 0 },
    ],
    { duration: 900 + Math.random() * 500 },
  );
  anim.onfinish = () => s.remove();
}
setInterval(spawn, 260);
spawn();

Make a four-pointed star (two crossed rectangles clipped at 45°, or a tiny inline SVG), place it at a random coordinate, and animate scale and opacity from 0 to 1 back to 0 — that's one twinkle. Spawn a new one on an interval and remove it from the DOM once its animation ends, so nothing accumulates.

Randomness is the whole point — size, position, and blink speed should differ every time, or the effect reads as mechanical instead of the "something magical just happened" feeling it's usually going for. If every sparkle pulses on the same rhythm, it becomes background noise that pulls attention away from the text it's meant to highlight.

Meteors trace a path across the screen; sparkles pop in place and vanish — that's the distinction.

When to use

Use for AI-generated output, a "new" badge, or a completion/celebration state. Keep it brief — running constantly around body content is just distracting.