Tip #21: Add confetti effects to your website with confetti.js

  • — Javascript

  • 1 min. read

  • — 2/21/2023

One of the best effects on the web today is a burst of confetti that gets triggered when a user clicks a button or completes a task.

You can very easily add your own confetti effects to your website using the confetti.js package.

I'll show you how you can add confetti.js to your website.

Start by downloading the package from confetti.org and add the file to your project.

Then, import the script by directly referencing it:

<script src="./js/confetti.min.js" />

Then, configure confetti.js. Make sure to create a clickable element and give it an id.

<body>
    <main>
        <button id="click-me">Click me</button>
    </main>
</body>
<script src="./js/confetti.min.js" />

<script>
const confetti = new Confetti("click-me");

// Confetti configuration
confetti.setCount(50);
</script>

You can view more configuration options at confettijs.org

Shaun Chander

hey (again), I'm shaun

I'm posting 3 tips on creative web development daily. Subscribe below to to get tips delivered straight into your inbox!