💌 Valentine’s Confetti Update: CSS Tips

Back in February, I shared a guide on how to integrate canvas-based confetti effects into your Angular project just in time for Valentine’s Day. If you missed it, check it out here. It covered using the popular canvas-confetti library to bring floating hearts and glittery explosions to your components. Since then, I’ve gotten a lot of feedback about styling the surrounding experience. So today, we’re revisiting the idea with a softer, more subtle twist: pure CSS enhancements to complement or even replace the JS-powered effect.

Tip 1: Falling Hearts with @keyframes

You can simulate falling confetti using only HTML and CSS by absolutely positioning some heart-shaped elements and animating their descent.

@keyframes fall {
  0% {
    transform: translateY(-100px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

.heart {
  position: absolute;
  top: -50px;
  width: 20px;
  height: 20px;
  background-color: pink;
  clip-path: path('M10 30 A20 20 0 1 1 30 30 Q30 50 10 70 Q-10 50 -10 30 A20 20 0 1 1 10 30');
  animation: fall 5s linear infinite;
}

Sprinkle multiple .heart elements across your DOM with varying left positions and animation delays for a randomized effect.

Tip 2: Confetti-Like Sprinkles with nth-child Variants

If you’re creating a burst that stays on-screen (like in celebration of a form submission), you can define a container of colored dots using CSS only.

.confetti span {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color);
  animation: pop 0.8s ease-out forwards;
}

@keyframes pop {
  from {
    transform: scale(0) translateY(0);
    opacity: 1;
  }
  to {
    transform: scale(1) translateY(-50px);
    opacity: 0;
  }
}

In HTML:

<div class="confetti">
  <span style="--color: #ff69b4"></span>
  <span style="--color: #db7093"></span>
  <span style="--color: #ff1493"></span>
</div>

Add top and left values randomly via JS or inline styles, or use a flex grid for a more structured appearance.

Tip 3: Hover-Activated Confetti Burst

Want a little surprise when someone hovers over your Valentine’s CTA button? Use a pseudo-element and transition:

.button {
  position: relative;
  overflow: hidden;
}

.button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, pink 10%, transparent 10.5%);
  background-size: 10% 10%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s ease-out;
}

.button:hover::after {
  transform: translate(-50%, -50%) scale(1);
}

This gives a soft, radiating burst without writing a single line of JavaScript. Works great in tandem with the canvas effect to build a richer, layered experience.

Bonus: Pairing with the Canvas Version

Don’t ditch the original canvas-confetti setup just yet. These CSS tips work beautifully when layered with it. Try using canvas for the high-energy burst and CSS for subtle, ambient motion. Your users won’t know what hit them—but they’ll feel the love.

Got your own Valentine’s-themed effects or CSS tricks? Drop them in the comments or tag @thecomputerchick on your favorite dev forum. Until next time, keep your UI sweet and your animations even sweeter.