Confetti Effect For Squarespace Websites

Feb 14

Written By Toni Williams - Founder of The Square Genius

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.

screenshot of where to put the code for the confetti effect for Squarespace

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>

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>

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!

Latest Plugins!

Quick View

Hotspot Image Hover Effect Squarespace Plugin

Quick View

Pop-in Style Squarespace Timeline Plugin

Quick View

Squarespace Scrolling Images Plugin Pro

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

Check out my Squarespace Premium Plugins

preview of a timline plugin for Squarespace websites — **Premium Timeline** Plugin

Featured

Confetti Effect For Squarespace Websites

How to Add a Copy to Clipboard Button for Squarespace

How to Add a Simple Squarespace Vertical Timeline

copy to clipboard code

Toni Williams - Founder of The Square Genius

Hi, I’m Toni. My mission is to create powerful websites for charities, non profits and purpose-led organisations dedicated to making a positive impact on the environment, communities, animal welfare and many more.

https://www.thesquaregenius.com/author-toni-williams