How to Create a Stunning Confetti Effect with CSS and HTML

Creating a Confetti Effect with CSS

Imagine adding a touch of celebration to your website without relying on external packages or libraries. In this article, we’ll explore how to create a confetti effect using only CSS and HTML. We’ll dive into the process of crafting different shapes, animating them, and randomizing their characteristics to achieve a mesmerizing effect.

Setting Up Our Files

To begin, create a folder for your project and add two files: index.html and style.css. In the index.html file, include the basic markup:
“`html


In the `style.css` file, we'll start by targeting the root, body, and HTML elements:
css
:root {
–bg: #f0f0f0;
}

body {
margin: 0;
padding: 0;
background-color: var(–bg);
}

html {
font-size: 16px;
}
“`
Creating Different Shapes

To add some variety to our confetti effect, we’ll create several shapes using CSS. Let’s start with a square:
css
.square {
width: 20px;
height: 20px;
background-color: var(--bg);
transform: rotate(45deg);
}

Next, we’ll create a rectangle:
css
.rectangle {
width: 30px;
height: 10px;
background-color: var(--bg);
}

We can also create more complex shapes like hexagrams, pentagrams, and dodecagrams using CSS transforms and pseudo-elements.

Animating Shapes

To create a waterfall effect, we’ll animate our shapes using CSS keyframes:
“`css
.confetti i {
animation: confetti 2s infinite;
}

@keyframes confetti {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100vh);
}
}
“`
Randomizing Shapes and Animation

To add an extra layer of realism to our confetti effect, we’ll randomize the shapes, animation duration, and colors. We can achieve this by passing variables directly to the shapes using HTML and CSS.

Bonus Styles

We can also add an option for the user to pause the confetti animation by adding a checkbox:
css
label input[type="checkbox"]:checked ~ .confetti-container {
animation-play-state: paused;
}

By following these steps, you can create a stunning confetti effect using only CSS and HTML. This effect can be used to add a touch of celebration to your website or application.