How to use the Particle Animation Generator
- Pick an effect — and click + Add layer to stack more (for example snow plus shooting stars); remove a layer with its ×. Effects: snow, snowflakes, rain, shooting stars, falling stars, confetti, petals, leaves, hearts, bubbles — or My SVG / image to upload your own, or Emoji.
- Adjust how many, size, speed, wind and sway. Pause between makes particles appear now and then, like shooting stars.
- Choose whether it covers the whole page (fixed overlay) or one section.
- Copy the HTML + CSS (no JavaScript) or the shorter JavaScript version, or download a demo page.
How the animation works
Each particle is an <i> element with its own size, start position, duration and delay stored in CSS custom properties. One @keyframes rule moves it from above the top edge to below the bottom; an inner <b> sways side to side and spins. Only transform is animated, so the browser runs it on the GPU without re-laying out the page.
.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 delays start every particle part-way through its fall, so the screen is already full when the page loads. pointer-events: none lets clicks pass through, and prefers-reduced-motion hides the effect for visitors who turned animations off.
Using your own SVG
Choose My SVG / image and upload a small SVG, PNG, WebP or GIF — a logo, a snowflake, a coin. It is embedded in the CSS as a data URI, so the snippet still needs no extra file. Built-in shapes are drawn with a CSS mask, so Mixed colors can recolor each one.
Related: CSS Keyframes Generator, CSS Animation Generator, SVG Blob Generator.
Also searched as: falling animation generator, particle effect css, css snow effect, snow falling animation css, rain animation css, falling stars animation, shooting star css, confetti animation css.
Tools that pair well with the Particle Animation Generator
- SVG Wave Generator — Design wavy section dividers for landing pages: add or remove waves (up to 6, each with its own color, opacity and shape), set the number of crests, height and smoothness, choose colors and whether the wave sits at the top or bottom.
- CSS Loader Generator — Pick from 13 pure-CSS loading spinners, adjust size, colors, thickness and speed, and copy lightweight, accessible HTML and CSS — no images, SVG or JavaScript.
- CSS Gradient Generator — Design a gradient visually — drag color stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback color.
- CSS Hover Animation Generator — Design hover animations for buttons, cards, links and icons.