Diese Seite ist noch nicht auf Deutsch verfügbar, daher zeigen wir die englische Version.

Confetti Animation CSS — Falling Confetti Generator

Celebrate a launch, a sign-up or a birthday with falling confetti that flutters and tumbles in mixed colors. Pure CSS — paste it on a thank-you page and you are done.

Aktualisiert am

Deine Daten verlassen nie deinen Computer. Die Verarbeitung erfolgt zu 100 % lokal im Browser.

So nutzt du: Confetti Animation CSS

  1. The preview starts with Confetti in mixed colors.
  2. Set how many pieces, size and speed; Sway makes them flutter.
  3. Turn off Mixed colors for one brand color.
  4. Copy the code onto your thank-you or success page.

Confetti that tumbles

Each piece is a small rectangle that falls with a slight sway while rotating in 3D (rotate3d), so it flips between its face and its edge like real paper. Colors are picked per piece with a CSS custom property.

For snow, rain and your own shapes see the Particle Animation Generator.

Auch gesucht als: falling confetti css, confetti effect website, css confetti, confetti background animation, celebration animation css.

Passende Tools zu: Confetti Animation CSS

  • CSS Snow Effect — Let it snow on your website for the holidays: soft snow or snowflakes, light flurries or a blizzard.
  • Falling Stars Animation — Send shooting stars streaking across a night-sky hero, or let star shapes drift down and twirl.
  • CSS Rain Animation — Make it rain on a page or hero section — from a light drizzle to a slanted downpour.
  • CSS Animation Generator — Design CSS animations on a real keyframe timeline.

Häufige Fragen

How do I add confetti to a thank-you page?
Copy the HTML + CSS and paste it into the page. It falls continuously over the page and does not block clicks.
Can I use my brand colors?
Turn off Mixed colors and pick your color, or edit the --c values in the HTML.
Can confetti burst once instead of looping?
This generator makes continuous falls. For a one-time burst, change infinite to 1 in the animation rule so each piece falls once.
Kann ich Confetti Animation CSS als Web-App installieren und offline nutzen?
Ja. Confetti Animation CSS ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.

Ähnliche Tools