Matt Angelosanto for LogRocket

Posted on Oct 26, 2022

How to create a confetti effect in CSS

#css #webdev

Adding a confetti effect to a website usually implies installing a package. What if we could create one for ourselves using nothing but pure, unadulterated CSS and HTML? Well, we’re going to do just that!

In this article, we are going to learn how to create a confetti effect with CSS. We’ll go over how to make different shapes, including squares, rectangles, hexagrams, pentagrams, decagrams, and wavy lines in CSS, as well as learn to animate the shapes and randomize their characteristics to create a confetti effect.

Setting up our files
Creating different styles of confetti with CSS
Creating the different confetti shapes
Animate shapes with a waterfall effect
Randomizing shapes, animations, duration, and color
Bonus styles

Setting up our files

The first thing we are going to do is create a folder on our machine. I called mine app, but you are free to name yours the way you like.

Open the folder with the code editor of your choice. Next, create two files inside the folder named index.html and style.css.

The index.html file will have this starter markup:



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Confetti</title>
  </head>
  <body>
    <label for="check">Check to stop</label>
    <input type="checkbox" id="check" />

    <div class="confetti-container">
      <div class="confetti">
        <i class="square"></i>
        <i class="rectangle"></i>
        <i class="hexagram"></i>
        <i class="pentagram"></i>
        <i class="dodecagram"></i>
        <i class="wavy-line"></i>
      </div>
    </div>
  </body>
</html>

In the markup above, we have some meta tags, a title, and a link to our CSS file in the head tag. The body element contains a label and a check box that will only be used for demonstration purposes.

The confetti-container class contains the confetti, and the confetti contains various i tags with classes that match the shapes we will create.

Creating different styles of confetti with CSS

To create the different styles of the confetti, we will open the style.css file.

Before we create the shapes, the first elements to target are root, body, html, label, and input. We will add the following styles to root and html:



:root {
  --bg: yellow;
}

html,
body {
  background-color: #101e35;
  font-size: 10px; /* Makes 1rem = 10px */
}

The label and input come next:



label {
  color: white;
  font-size: 1.5rem;
}
input {
  width: 40px;
  height: 40px;
  cursor: pointer;
}

And then we set the following styles for .confetti-container and .confetti:



.confetti-container {
  user-select: none;
  pointer-events: none;
  z-index: 10;
}

.confetti {
  position: fixed;
  left: 0;
  right: 0;
  display: flex;
}

Let's break this down a bit.

user-select and pointer-events ensure that the content of .confetti-container cannot be highlighted by the user.

Then, z-index ensures that the content of the .confetti-container remains above every element on the page.

The style in .confetti ensures that the confetti will behave separately from the other content on the page. The display is set to ensure that the content of .confetti is always stacked horizontally.

Creating the different confetti shapes

Now, we’ll go over how to create different shapes for our confetti effect. We do this to help add some variety to the confetti effect!

Creating a square

To create a square, we will select the .square class and add the following style to it:



.confetti .square {
  width: 1rem;
  height: 1rem;
  background-color: var(--bg);
  transform: rotate(140deg);
}

var(--bg) is an example of a CSS variable. This was set in the :root, however, it will also be set directly in the HTML in each shape.

The transform property is used to rotate the square.

Create a rectangle

A rectangle is similar to a square, however, the width and height won’t be the same. The following styles will generate a rectangle:



.confetti .rectangle {
  width: 1rem;
  height: 0.5rem;
  background-color: var(--bg);
}

Creating a hexagram

.hexagram is a star that has six sides. The following code will generate one for us:



.confetti .hexagram {
  width: 0;
  height: 0;
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
  border-bottom: 1rem solid var(--bg);
  position: relative;
}

.confetti .hexagram:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
  border-top: 1rem solid var(--bg);
  position: absolute;
  top: 0.33rem;
  left: -0.5rem;
}

In .confetti .hexagram, setting the width and height to 0, as well as setting the borders in the same manner, ensure that we generate a triangle. The position element makes sure that the properties within it can be moved independently.

In .confetti .hexagram:after, we generate another triangle that is reversed. And with the position set to absolute, we can set the values for top and left to correctly position and form a six-sided star.

Creating a pentagram

To create a pentagram, we need to make a five-sided star. To do so, we will add the following styles to .pentagram:



.confetti .pentagram {
  width: 0rem;
  height: 0rem;
  display: block;
  margin: 0.5rem 0;
  border-right: 1rem solid transparent;
  border-bottom: 0.7rem solid var(--bg);
  border-left: 1rem solid transparent;
  transform: rotate(35deg);
  position: relative;
}
.confetti .pentagram:before {
  border-bottom: 0.8rem solid var(--bg);
  border-left: 0.3rem solid transparent;
  border-right: 0.3rem solid transparent;
  position: absolute;
  height: 0;
  width: 0;
  top: -0.45rem;
  left: -0.65rem;
  display: block;
  content: "";
  transform: rotate(-35deg);
}
.confetti .pentagram:after {
  position: absolute;
  display: block;
  color: var(--bg);
  top: 0.03rem;
  left: -1.05rem;
  width: 0rem;
  height: 0rem;
  border-right: 1rem solid transparent;
  border-bottom: 0.7rem solid var(--bg);
  border-left: 1rem solid transparent;
  transform: rotate(-70deg);
  content: "";
}

Let’s break it down.

.confetti .pentagram generates a triangle and rotates it by 35deg.

.confetti .pentagram:before generates a triangle as well and rotates it by -35deg. The position was set to move the elements vertically and horizontally.

.confetti .pentagram:after generates another triangle and rotates it by 70deg. Additionally, the position was used to move the top and bottom displacement.

Creating a dodecagram

A dodecagram is a 12-sided star. It combines squares to form its shape. Let’s build it within our .dodecagram element:



.confetti .dodecagram {
  background: var(--bg);
  width: 8px;
  height: 8px;
  position: relative;
}

.confetti .dodecagram:before {
  content: "";
  height: 8px;
  width: 8px;
  background: var(--bg);
  transform: rotate(30deg);
  position: absolute;
  top: 0;
  left: 0;
}
.confetti .dodecagram:after {
  content: "";
  height: 8px;
  width: 8px;
  background: var(--bg);
  transform: rotate(60deg);
  position: absolute;
  top: 0;
  left: 0;
}

.confetti .dodecagram generates a square, but confetti .dodecagram:before and .confetti .dodecagram:after generate two rotated squares.

Creating a wavy line with CSS

To create our .wavy-line element, we will write the following code:



.confetti .wavy-line {
  position: relative;
}
.confetti .wavy-line::after,
.confetti .wavy-line::before {
  content: "";
  height: 10px;
  width: 80px;
  background-size: 20px 10px;
  position: absolute;
  left: -9rem;
  transform: rotate(90deg);
}

.confetti .wavy-line::before {
  background-image: linear-gradient(
    45deg,
    transparent,
    transparent 50%,
    var(--bg) 50%,
    transparent 60%
  );
  top: 1rem;
}
.confetti .wavy-line::after {
  background-image: linear-gradient(
    -45deg,
    transparent,
    transparent 50%,
    var(--bg) 50%,
    transparent 60%
  );
}

Let’s go over this in more detail. .confetti .wavy-line was used to set a relative position to its content.

In .confetti .wavy-line::after and .confetti .wavy-line::before, background-size is used to specify the horizontal and vertical size of the pseudo-element.

background-image was then used to draw the lines with their specific angles.

Animate shapes with a waterfall effect

To animate the shapes and make them simulate a waterfall, we will add the following styles:



.confetti i {
  width: 3rem;
  height: 3rem;
  margin: 0 0.2rem;
  animation-name: confetti;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: calc(60s / var(--speed));
}

.confetti i:nth-child(even) {
  transform: rotate(90deg);
}

@keyframes confetti {
  0% {
    transform: translateY(-100vh);
  }

  100% {
    transform: translateY(100vh);
  }
}

Within the code, .confetti i is used to select every shape and apply animation properties to it.

calc() is a function used to perform calculations in CSS.

We select .confetti i:nth-child(even) to rotate every shape whose index is an even number.

Finally, under the @keyframes confetti, we create an animation to make the shapes move from the top to the bottom of the page.

Randomizing shapes, animation, duration, and color

To make the shapes fall with varying duration and have different colors, we have to pass variables directly to the shapes using HTML and then get rid of :root entirely:



<div class="confetti-container">
      <div class="confetti">
        <i style="--bg: red; --speed: 20" class="square"></i>
        <i style="--bg: green; --speed: 24" class="rectangle"></i>
        <i style="--bg: white; --speed: 13" class="hexagram"></i>
        <i style="--bg: yellow; --speed: 10" class="pentagram"></i>
        <i style="--bg: purple; --speed: 17" class="dodecagram"></i>
        <i style="--bg: pink; --speed: 15" class="wavy-line"></i>
      </div>
</div>

Next, we’ll create more of these shapes, add random colors, and give them some speed to generate our confetti:



<div class="confetti-container">
      <div class="confetti">
        <i style="--speed: 10; --bg: yellow" class="square"></i>
        <i style="--speed: 18; --bg: white" class="pentagram"></i>
        <i style="--speed: 29; --bg: green" class="rectangle"></i>
        <i style="--speed: 17; --bg: blue" class="hexagram"></i>
        <i style="--speed: 33; --bg: red" class="pentagram"></i>
        <i style="--speed: 26; --bg: yellow" class="dodecagram"></i>
        <i style="--speed: 24; --bg: pink" class="wavy-line"> </i>
        <i style="--speed: 5; --bg: blue" class="wavy-line"></i>
        <i style="--speed: 40; --bg: white" class="square"></i>
        <i style="--speed: 17; --bg: green" class="rectangle"></i>
        <i style="--speed: 25; --bg: white" class="square"></i>
        <i style="--speed: 18; --bg: green" class="rectangle"></i>
        <i style="--speed: 15; --bg: yellow" class="wavy-line"> </i>
        <i style="--speed: 32; --bg: yellow" class="pentagram"></i>
        <i style="--speed: 25; --bg: white" class="square"></i>
        <i style="--speed: 18; --bg: green" class="rectangle"></i>
        <i style="--speed: 37; --bg: yellow" class="dodecagram"></i>
        <i style="--speed: 23; --bg: pink" class="wavy-line"></i>
        <i style="--speed: 37; --bg: red" class="dodecagram"></i>
        <i style="--speed: 37; --bg: pink" class="wavy-line"></i>
        <i style="--speed: 36; --bg: white" class="hexagram"></i>
        <i style="--speed: 32; --bg: green" class="wavy-line"></i>
        <i style="--speed: 32; --bg: yellow" class="pentagram"></i>
        <i style="--speed: 29; --bg: white" class="square"></i>
        <i style="--speed: 18; --bg: green" class="rectangle"></i>
        <i style="--speed: 37; --bg: red" class="dodecagram"></i>
        <i style="--speed: 23; --bg: pink" class="wavy-line"> </i>
        <i style="--speed: 30; --bg: pink" class="rectangle"></i>
        <i style="--speed: 30; --bg: red" class="square"></i>
        <i style="--speed: 18; --bg: red" class="pentagram"></i>
        <i style="--speed: 19; --bg: green" class="rectangle"></i>
        <i style="--speed: 16; --bg: blue" class="hexagram"></i>
        <i style="--speed: 23; --bg: red" class="pentagram"></i>
        <i style="--speed: 34; --bg: yellow" class="dodecagram"></i>
        <i style="--speed: 39; --bg: pink" class="wavy-line"></i>
        <i style="--speed: 40; --bg: purple" class="square"></i>
        <i style="--speed: 21; --bg: green" class="rectangle"></i>
        <i style="--speed: 14; --bg: white" class="square"></i>
        <i style="--speed: 38; --bg: green" class="rectangle"></i>
        <i style="--speed: 19; --bg: red" class="dodecagram"></i>
        <i style="--speed: 29; --bg: pink" class="wavy-line"> </i>
        <i style="--speed: 21; --bg: white" class="hexagram"></i>
        <i style="--speed: 17; --bg: purple" class="wavy-line"></i>
        <i style="--speed: 32; --bg: yellow" class="pentagram"></i>
        <i style="--speed: 23; --bg: white" class="square"></i>
        <i style="--speed: 18; --bg: green" class="rectangle"></i>
        <i style="--speed: 37; --bg: red" class="dodecagram"></i>
        <i style="--speed: 48; --bg: pink" class="wavy-line"> </i>
        <i style="--speed: 38; --bg: pink" class="rectangle"></i>
        <i style="--speed: 13; --bg: red" class="pentagram"></i>
        <i style="--speed: 49; --bg: yellow" class="dodecagram"></i>
        <i style="--speed: 19; --bg: cyan" class="wavy-line"></i>
        <i style="--speed: 15; --bg: steelblue" class="square"></i>
        <i style="--speed: 10; --bg: yellow" class="square"></i>
        <i style="--speed: 18; --bg: white" class="pentagram"></i>
        <i style="--speed: 29; --bg: green" class="rectangle"></i>
        <i style="--speed: 17; --bg: blue" class="hexagram"></i>
        <i style="--speed: 33; --bg: red" class="pentagram"></i>
        <i style="--speed: 26; --bg: yellow" class="dodecagram"></i>
        <i style="--speed: 24; --bg: pink" class="wavy-line"> </i>
        <i style="--speed: 5; --bg: white" class="wavy-line"></i>
        <i style="--speed: 40; --bg: purple" class="square"></i>
        <i style="--speed: 17; --bg: green" class="rectangle"></i>
        <i style="--speed: 25; --bg: white" class="square"></i>
        <i style="--speed: 18; --bg: green" class="rectangle"></i>
        <i style="--speed: 15; --bg: cyan" class="wavy-line"> </i>
        <i style="--speed: 32; --bg: yellow" class="pentagram"></i>
        <i style="--speed: 45; --bg: white" class="square"></i>
        <i style="--speed: 18; --bg: green" class="rectangle"></i>
        <i style="--speed: 37; --bg: red" class="dodecagram"></i>
        <i style="--speed: 23; --bg: pink" class="wavy-line"> </i>
        <i style="--speed: 37; --bg: red" class="dodecagram"></i>
        <i style="--speed: 37; --bg: pink" class="wavy-line"> </i>
        <i style="--speed: 26; --bg: white" class="hexagram"></i>
        <i style="--speed: 32; --bg: cyan" class="wavy-line"></i>
        <i style="--speed: 32; --bg: yellow" class="pentagram"></i>
        <i style="--speed: 45; --bg: white" class="square"></i>
        <i style="--speed: 18; --bg: green" class="rectangle"></i>
        <i style="--speed: 37; --bg: red" class="dodecagram"></i>
        <i style="--speed: 23; --bg: pink" class="wavy-line"> </i>
        <i style="--speed: 50; --bg: pink" class="rectangle"></i>
        <i style="--speed: 30; --bg: red" class="square"></i>
        <i style="--speed: 18; --bg: red" class="pentagram"></i>
        <i style="--speed: 19; --bg: green" class="rectangle"></i>
        <i style="--speed: 16; --bg: blue" class="hexagram"></i>
        <i style="--speed: 23; --bg: red" class="pentagram"></i>
        <i style="--speed: 33; --bg: yellow" class="dodecagram"></i>
        <i style="--speed: 39; --bg: white" class="wavy-line"></i>
        <i style="--speed: 40; --bg: orange" class="square"></i>
        <i style="--speed: 21; --bg: green" class="rectangle"></i>
        <i style="--speed: 14; --bg: white" class="square"></i>
        <i style="--speed: 38; --bg: green" class="rectangle"></i>
        <i style="--speed: 19; --bg: red" class="dodecagram"></i>
        <i style="--speed: 29; --bg: pink" class="wavy-line"> </i>
        <i style="--speed: 34; --bg: white" class="hexagram"></i>
        <i style="--speed: 17; --bg: indigo" class="wavy-line"></i>
        <i style="--speed: 32; --bg: yellow" class="pentagram"></i>
        <i style="--speed: 23; --bg: white" class="square"></i>
        <i style="--speed: 18; --bg: green" class="rectangle"></i>
        <i style="--speed: 37; --bg: red" class="dodecagram"></i>
        <i style="--speed: 48; --bg: pink" class="wavy-line"> </i>
        <i style="--speed: 38; --bg: pink" class="rectangle"></i>
        <i style="--speed: 13; --bg: red" class="pentagram"></i>
        <i style="--speed: 49; --bg: yellow" class="dodecagram"></i>
        <i style="--speed: 19; --bg: purple" class="wavy-line"></i>
        <i style="--speed: 15; --bg: cyan" class="square"></i>
    </div>
</div>

You can see the final result of our CSS confetti effect in the CodePen below:

See the Pen CSS Confetti by Onuorah Bonaventure Chukwudi (@bonarhyme) on CodePen.

Bonus styles

We can also include an option for the user to pause the confetti. Add the following style so that we can stop the animation when we click the checkbox:



input:checked + .confetti-container i {
  /* display: none; */
  animation-play-state: paused;
}

You can also specify the dimension of the confetti using this style:



.confetti {
  position: fixed;
  left: 0;
  right: 0;
  display: flex;
  width: 600px;
  height: 600px;
  overflow: hidden;
}

N.B., Adding a display of none removes the confetti from the screen.

The complete code with these bonus styles can be viewed, edited, and forked on CodePen and GitHub:

See the Pen CSS Confetti with bonus style by Onuorah Bonaventure Chukwudi (@bonarhyme) on CodePen.

Conclusion

Although it may have seemed daunting, we were able to create a cool confetti effect with CSS! This is all to show that CSS shouldn’t look scary and that you can tap into its superpowers to create amazing animations and layouts.

Thank you for reading through. I hope you enjoyed this article, and be sure to leave a comment if you have any questions. Happy coding!