Sparkle up Your Website ✨

Recently, for one of my current projects, I was looking for a jQuery plug-in that adds a sparkle effect to DOM elements. However, I couldn’t find any that suited my needs. Either, the available plug-ins were way too elaborated for what I had in mind or the sparkle effect just didn’t exactly look like I had imagined. So, after an afternoon of researching existing jQuery plug-ins, I decided to simply code one myself, which I wanna share with you here.

You can add a sparkle effect—i.e., a single sparkling star—to any DOM element by doing the following with the given, optional parameters:

  fill: "#fff", // fill color of the star that makes up the sparkle effect (default: #fff)
  stroke: "#000", // outline color of the star (default: #000)
  size: 20, // size of the sparkle effect in px (default: 20)
  delay: 0, // delay before first sparkle in ms (default: 0)
  duration: 1500, // duration of a sparkle in ms (default: 1500)
  pause: 1000 // delay between two sparkles in ms (default: 1000)

In case you want to add multiple sparkling stars to the DOM element, you can call the sparkle() function more than once, also with different parameters:

  size: 30
  size: 30
  delay: 1000,
  size: 10,
  pause: 750

The sparkle effect can be removed using the following option:


Check out GitHub for downloading the necessary CSS and JS files of the plug-in: Also, see CodePen for the original implementation of the plug-in:

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.