Confetti Effect For Squarespace Websites

Add a touch of celebration to your Squarespace website with my confetti effect for Squarespace! Whether you’re announcing a sale, launching a product, or just want to add a fun, engaging element to your site, this effect creates an eye-catching burst of digital confetti that enhances user experience without slowing down your page.

Also check out Style - The 2 heart emoji ❤️ effect for those special occasions 😉

Style 1. Confetti Effect:

Adding The Code For The Squarespace Confetti Effect:

Option 1 Add To One Page:

If you want to show your confetti on just one page, add the below code to your pages header code area.

Go to your specific page > advanced > code injection and paste the below code.

Option 2 Add To The Whole Site:

Add The Confetti Effect Code To The Footer Injection Area.

If you want to show the confetti effect across all of your website pages you can add it to the footer code area.

Go to > pages > website tools > code injection and paste the following code.

Confetti Effect Code:

<script> document.addEventListener("DOMContentLoaded", function () { let duration = 10000; // Effect duration in milliseconds (10 seconds) let interval = setInterval(createConfetti, 200); // Faster start by reducing interval time let endTime = Date.now() + duration; function createConfetti() { if (Date.now() > endTime) { clearInterval(interval); // Stops creating confetti after 10 seconds return; } const confetti = document.createElement("div"); confetti.classList.add("floating-confetti"); document.body.appendChild(confetti); const width = Math.random() * 10 + 6 + "px"; const height = Math.random() * 20 + 4 + "px"; // Paper strip effect confetti.style.left = Math.random() * 100 + "vw"; confetti.style.width = width; confetti.style.height = height; confetti.style.backgroundColor = randomColor(); confetti.style.position = "fixed"; confetti.style.top = "0"; // Start from the top of the viewport confetti.style.opacity = "0.9"; confetti.style.borderRadius = "2px"; confetti.style.transform = `rotate(${Math.random() * 360}deg)`; confetti.style.animation = `fallDown ${Math.random() * 3 + 2}s linear forwards, spin ${Math.random() * 2 + 1}s infinite linear`; confetti.style.zIndex = "9999"; // Bring confetti to the front setTimeout(() => { confetti.remove(); }, 5000); } function randomColor() { const colors = ["#ff0", "#f00", "#0f0", "#00f", "#ff69b4", "#ffa500", "#8a2be2", "#00ced1"]; return colors[Math.floor(Math.random() * colors.length)]; } // Ensure confetti appears immediately for (let i = 0; i < 15; i++) { createConfetti(); } }); // Add styles const style = document.createElement("style"); style.innerHTML = ` .floating-confetti { position: fixed; opacity: 0.9; animation: fallDown 5s linear forwards, spin 1s infinite linear; z-index: 9999; /* Ensure confetti appears in front */ pointer-events: none; /* Prevent interaction issues */ } @keyframes fallDown { 0% { top: 0; opacity: 1; } 100% { top: 100vh; opacity: 0; } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } `; document.head.appendChild(style); </script> Copy

Style 2. Heart Emoji Effect:

Add The Heart Emoji Effect:

Add the code to the whole site: Go to > pages > website tools > code injection and paste the below code.

Add it to one page: Go to your specific page > advanced > code injection and paste the code.

Heart Emoji Effect Code:

<script> document.addEventListener("DOMContentLoaded", function () { let duration = 3000; // Effect duration let interval = setInterval(createHeart, 200); // Faster start by reducing interval time let endTime = Date.now() + duration; function createHeart() { if (Date.now() > endTime) { clearInterval(interval); // Stops creating hearts after 10 seconds return; } const heart = document.createElement("div"); heart.classList.add("floating-heart"); heart.innerHTML = "❤️"; document.body.appendChild(heart); const size = Math.random() * 20 + 10 + "px"; heart.style.left = Math.random() * 100 + "vw"; heart.style.fontSize = size; heart.style.position = "fixed"; heart.style.top = "0"; heart.style.opacity = "0.9"; heart.style.zIndex = "99999"; // Ensure hearts appear in front of all elements heart.style.pointerEvents = "none"; // Prevent interaction issues heart.style.animation = `floatDown ${Math.random() * 3 + 2}s linear forwards`; setTimeout(() => { heart.remove(); }, 3500); } // Ensure hearts appear immediately for (let i = 0; i < 15; i++) { createHeart(); } }); // Add styles const style = document.createElement("style"); style.innerHTML = ` .floating-heart { position: fixed; top: 0; opacity: 0.9; animation: floatDown 3.5s linear forwards; z-index: 99999; /* Ensure hearts appear in front of all elements */ pointer-events: none; /* Prevent interaction issues */ } @keyframes floatDown { 0% { transform: translateY(-10px); opacity: 1; } 100% { transform: translateY(100vh); opacity: 0; } } `; document.head.appendChild(style); </script> Copy

Customizing the code to Fit Your Preferences

Changing the Effect Duration

• The effect duration is currently set by let duration = 3000;, which means the hearts will be generated for 3 seconds.

• To extend or shorten the effect, increase or decrease this number (e.g., 5000 for 5 seconds, 10000 for 10 seconds).

I hope you enjoy the Confetti Effect For Squarespace!

Easily integrate this confetti effect into your Squarespace site for an instant visual boost. Perfect for promotions, special events, and interactive branding—no coding skills needed!

Let me know how your animated effect turned out in the comments!

Did I help you? Consider buying me a coffee as thanks!

---

For more cool Squarespace tips check out my blog, or sign up to my newsletter.

Check out my Squarespace Premium Plugins

Premium Timeline Plugin

Image Scroller Plugin

---

Must Have CSS Codes!

Enter your email to get access to my must have CSS codes for Squarespace!

Yes please!

Loading...

Thank you!

You have successfully joined our subscriber list.