Add falling confetti with CSS

Hello Webflow,

I wanted to show you a simple way of adding confetti to your site I found this in CodePen.

First, create a div with a class of “container” inside that div create about 10-15 divs depending on how much confetti you’d like and each one with a class of “confetti”.
Now add the CSS code to the page. publish it and your good to go! For more fun ideas check out my site Whatwillyoubuild?

 <style>
        .container {
              width: 100%;
          height: 100%;
        }
        .confetti {
          width: 15px;
          height: 15px;
          background-color: #f2d74e;
          position: absolute;
          left: 50%;
          animation: confetti 5s ease-in-out -2s infinite;
          transform-origin: left top;
        }
        .confetti:nth-child(1) {
          background-color: #f2d74e; left: 10%; animation-delay: 0;
        }
        .confetti:nth-child(2) {
          background-color: #95c3de; left: 20%; animation-delay: -5s;
        }
        .confetti:nth-child(3) {
          background-color: #ff9a91; left: 30%; animation-delay: -3s;
        }
        .confetti:nth-child(4) {
          background-color: #f2d74e; left: 40%; animation-delay: -2.5s;
        }
        .confetti:nth-child(5) {
          background-color: #95c3de; left: 50%; animation-delay: -4s;
        }
        .confetti:nth-child(6) {
          background-color: #ff9a91; left: 60%; animation-delay: -6s;
        }
        .confetti:nth-child(7) {
          background-color: #f2d74e; left: 70%; animation-delay: -1.5s;
        }
        .confetti:nth-child(8) {
          background-color: #95c3de; left: 80%; animation-delay: -2s;
        }
        .confetti:nth-child(9) {
          background-color: #ff9a91; left: 90%; animation-delay: -3.5s;
        }
        .confetti:nth-child(10) {
          background-color: #f2d74e; left: 100%; animation-delay: -2.5s;
        }

        @keyframes confetti {
          0% { transform: rotateZ(15deg) rotateY(0deg) translate(0,0); }
          25% { transform: rotateZ(5deg) rotateY(360deg) translate(-5vw,20vh); }
          50% { transform: rotateZ(15deg) rotateY(720deg) translate(5vw,60vh); }
          75% { transform: rotateZ(5deg) rotateY(1080deg) translate(-10vw,80vh); }
          100% { transform: rotateZ(15deg) rotateY(1440deg) translate(10vw,110vh); }
        }
        </style>
4 Likes

I literally was just looking for a way to do this and here you are :slight_smile:

Thanks so much for your contributions!

1 Like

I’m glad it was helpful :smiley:

1 Like

Brilliant. Thanks @Steven_Joel

What’s the CSS to limit it to just first 10/15 seconds?

best
Tim

change infinite to the amount of times you want it to play… so the confetti takes 5s to play, if you want to play it 10/15 seconds I think you should replace infinite with 2 or 3. Let me know if this works. :wink:

Thanks for that - I thought so too, but I think I must be missing something else out, as it shows the coloured divs at the top of the container…

I’m very new to using CSS, is there a way to reset the animation on command? Ex: A button labeled confetti that causes the confetti to rain down for a moment?