So nutzt du: Partikel-Animation Generator
- Wähle einen Effekt – und klicke auf + Ebene hinzufügen, um weitere zu stapeln (zum Beispiel Schnee plus Sternschnuppen); eine Ebene entfernst du mit ihrem ×. Effekte: Schnee, Schneeflocken, Regen, Sternschnuppen, fallende Sterne, Konfetti, Blüten, Blätter, Herzen, Blasen – oder Eigene SVG / Bild zum Hochladen oder Emoji.
- Passe Anzahl, Größe, Tempo, Wind und Schwingen an. Pause dazwischen lässt Partikel ab und zu erscheinen, wie Sternschnuppen.
- Lege fest, ob es die ganze Seite abdeckt (feste Überlagerung) oder nur einen Abschnitt.
- Kopiere das HTML + CSS (ohne JavaScript) oder die kürzere JavaScript-Version oder lade eine Demoseite herunter.
So funktioniert die Animation
Jedes Partikel ist ein <i>-Element mit eigener Größe, Startposition, Dauer und Verzögerung, gespeichert in CSS-Custom-Properties. Eine @keyframes-Regel bewegt es von oberhalb der oberen Kante bis unterhalb der unteren; ein inneres <b> schwingt seitlich hin und her und dreht sich. Nur transform wird animiert, sodass der Browser die Animation auf der GPU ausführt, ohne die Seite neu zu layouten.
.dp-fall { position: fixed; inset: 0; overflow: hidden; pointer-events: none; container-type: size; }
.dp-fall i { position: absolute; top: 0; animation: dp-fall var(--d) linear var(--t) infinite; }
@keyframes dp-fall { to { transform: translate(var(--dx), calc(100cqh + var(--s) * 3)); } }Negative Verzögerungen starten jedes Partikel schon mitten im Fall, sodass der Bildschirm beim Laden bereits gefüllt ist. pointer-events: none lässt Klicks durch, und prefers-reduced-motion blendet den Effekt für Besucher aus, die Animationen deaktiviert haben.
Eigene SVG verwenden
Wähle Eigene SVG / Bild und lade eine kleine SVG, PNG, WebP oder GIF hoch – ein Logo, eine Schneeflocke, eine Münze. Sie wird als Data-URI im CSS eingebettet, das Snippet braucht also weiterhin keine zusätzliche Datei. Eingebaute Formen werden mit einer CSS-Maske gezeichnet, daher kann Gemischte Farben jede einzelne neu einfärben.
Passend dazu: CSS Keyframes Generator, CSS Animation Generator, SVG Blob Generator.
Auch gesucht als: falling animation generator, partikel effekt css, css schnee effekt, schneefall animation css, regen animation css, fallende sterne animation, sternschnuppe css, konfetti animation css.
Passende Tools zu: Partikel-Animation Generator
- SVG Wellen Generator — Gestalte wellige Abschnitts-Trenner für Landingpages: Wellen hinzufügen oder entfernen (bis zu 6, jeweils mit eigener Farbe, Deckkraft und Form), Anzahl der Kämme, Höhe und Glättung festlegen, Farben wählen und bestimmen, ob die Welle oben oder unten sitzt.
- CSS-Loader-Generator — Wähle einen von 13 Lade-Spinnern in reinem CSS, passe Größe, Farben, Dicke und Tempo an und kopiere schlankes, barrierefreies HTML und CSS — ohne Bilder, SVG oder JavaScript.
- CSS Verlauf Generator — Gestalte einen Verlauf visuell: Farbstopps ziehen, Winkel oder Typ ändern, mit einer Vorlage starten.
- CSS Hover-Animation Generator — Gestalte Hover-Animationen für Buttons, Karten, Links und Icons.