OneTaskBy Tim King · Updated
Sparkle Text Effect
Twinkling Star Sparkles Around a Word or Heading, With Count, Size, Colour and Speed
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Sparkle Text Effect works
This sparkle text effect generator scatters small four-pointed stars around a word and makes them twinkle in and out at different moments. Set the text, the number of sparkles, their colour and the speed, then copy the HTML and CSS.
Sparkles draw attention to words like "new", "free" or a sale headline without moving the text itself.
How the sparkle text effect works
Each sparkle is a small <i> element showing the four-pointed star character ✦. Their positions
and delays come from a fixed seed, so the layout is the same each time. One keyframe grows, spins and
fades each star, and different delays keep them twinkling out of step.
Using sparkles with care
The stars are decoration, so they are hidden from screen readers and placed around the word rather than over it. For visitors who prefer reduced motion, the copied CSS shows them still.
FAQ
Can I use sparkles on a button?
Yes. Put the button text inside the sparkle wrapper and give the button some padding so the stars have room. Keep the count low on small buttons, as four or five sparkles is usually plenty.
Why do the sparkles appear in the same places every time?
Positions come from a seeded random generator, so the effect looks hand-placed and stays the same on every visit. Change the number of sparkles to get a different arrangement.
Do the sparkles slow the page down?
No. Each star only animates transform and opacity, which browsers handle on the graphics card, so even a dozen sparkles add almost nothing to the work the page has to do.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Wavy Text Animation
Letters that bob up and down in a rolling wave.
Gradient Text Generator
Fill headline text with a CSS gradient and copy the code.
Glow Effect
Neon glow for headings and buttons, pure CSS.
Starfield Background
Make stars stream past as if flying through space.
Confetti Generator
Fire a burst of confetti from a button, no library.