So nutzt du: Konfetti-Animation CSS
- Die Vorschau startet mit Konfetti in gemischten Farben.
- Stelle Anzahl, Größe und Tempo ein; Schwingen lässt sie flattern.
- Deaktiviere Gemischte Farben, um eine einzelne Markenfarbe zu nutzen.
- Kopiere den Code auf deine Dank- oder Erfolgsseite.
Konfetti, das taumelt
Jedes Teil ist ein kleines Rechteck, das mit leichtem Schwingen fällt und dabei in 3D rotiert (rotate3d). So wechselt es zwischen Vorder- und Kante wie echtes Papier. Die Farben werden pro Teil über eine CSS-Custom-Property gewählt.
Für Schnee, Regen und eigene Formen schau dir den Particle Animation Generator an.
Auch gesucht als: fallendes konfetti css, konfetti effekt website, css konfetti, konfetti hintergrund animation, feier animation css, confetti animation css, css confetti effect.
Passende Tools zu: Konfetti-Animation CSS
- CSS-Schneeeffekt — Lass es auf deiner Website zur Weihnachtszeit schneien: sanfter Schnee oder Schneeflocken, leichtes Gestöber oder ein Schneesturm.
- Falling Stars Animation — Lass Sternschnuppen über einen Nachthimmel-Hero flitzen oder Sternformen herabschweben und sich drehen.
- CSS-Regen-Animation — Lass es auf einer Seite oder einem Hero-Bereich regnen — von leichtem Nieselregen bis zu einem schrägen Wolkenbruch.
- CSS-Animation-Generator — Gestalte CSS-Animationen auf einer echten Keyframe-Timeline.
Häufige Fragen
Wie füge ich Konfetti zu einer Dankeseite hinzu?
Kopiere das HTML + CSS und füge es in die Seite ein. Das Konfetti fällt dauerhaft über die Seite und blockiert keine Klicks.
Kann ich meine Markenfarben verwenden?
Deaktiviere Gemischte Farben und wähle deine Farbe aus, oder passe die --c-Werte im HTML an.
Kann das Konfetti einmalig statt in Schleife fallen?
Dieser Generator erzeugt dauerhaftes Fallen. Für einen einmaligen Schwall ändere in der Animationsregel infinite zu 1, damit jedes Teil nur einmal fällt.
Kann ich Konfetti-Animation CSS als Web-App installieren und offline nutzen?
Ja. Konfetti-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.