Particle Effect Generator

Particle Effect Generator

Create canvas-based particle systems with presets like confetti, snow, fire, rain, stars. Adjustable parameters. Export as PNG or WebM. Free online particle effects maker

A particle system is N small objects drawn each frame with shared rules (velocity, gravity, color, lifespan, size). Used for: snow, rain, fire, smoke, explosions, sparks, confetti, fairy dust, magic effects. This generator runs particle systems on HTML5 canvas with adjustable parameters, presets for common effects, and exports as standalone JS / GIF / WebM for use anywhere.

How a particle system works

  • Emitter — point / line / area from which particles spawn. Rate controls particles-per-second.
  • Each particle has — position, velocity, acceleration (gravity, wind), lifespan, current age, size, color, opacity, rotation.
  • Per-frame update — age += dt. position += velocity × dt. velocity += acceleration × dt. opacity = function(age / lifespan). When age > lifespan, particle is removed.
  • Color / size / opacity over lifetime — interpolated. Fire particles spawn yellow → orange → red → fade out.
  • Total population — typical: 100-2000 particles for visible effects. Beyond ~5000 on canvas, frame rate drops.

Working example: a confetti burst

Input

A "celebration" confetti effect for a success screen

Output

Emitter: single point (center of screen)
Burst: 200 particles in one frame

Particle parameters:
  Color: random from [#ff6b6b, #f9ca24, #6ab04c, #686de0, #eb4d4b, #22a6b3]
  Initial velocity: random direction, magnitude 8-15 pixels/sec
  Gravity: 0.5 pixels/sec² downward
  Lifespan: 2-3 seconds
  Size: 5×10 px rectangles (long-thin confetti shape)
  Rotation: random 0-2π, with angular velocity 2-5 rad/sec
  Opacity: 1.0 → fade to 0 at end of lifespan

Over time:
  t=0: burst, particles fly outward.
  t=1s: particles slowing, starting to fall under gravity.
  t=2s: most particles below original burst point, fading.
  t=3s: all gone.

Usage:
  Trigger on form success, achievement unlock, payment confirmation.
  Do NOT use repeatedly — confetti for every action becomes spam.

For a single one-shot confetti effect, confetti.js (canvas-confetti library) is the standard — pre-built, optimized, easy to integrate. The generator here is for understanding the parameters and producing custom variations.

Common particle effects and their parameters

  • Snow — slow downward velocity, small particles, slow gravity, mild horizontal wobble. Lifespan: until off screen.
  • Rain — fast downward, thin elongated particles, no rotation, no fade.
  • Fire — upward velocity, particles spawn at bottom, color shifts hot → cool over lifetime, fade as they rise.
  • Smoke — slow upward, particles expand over lifetime, opacity decreases, gray-to-transparent.
  • Sparks — outward burst from emitter, fast initial velocity, gravity, small bright particles, short lifespan.
  • Magic dust — slow drift in random directions, twinkle effect (opacity oscillation), small bright particles.
  • Explosion — large outward burst, particles slow with drag, fade quickly. Often combined with light flash.

Performance considerations

  • Canvas redraw per frame — expensive. With 1000 particles, you are redrawing 1000 shapes per frame. Cap at 60fps; modern computers handle this fine, mobile may not.
  • For complex effects, prefer WebGL (Three.js Points / GPGPU) over Canvas — particle counts can reach millions.
  • Recycle particles instead of creating new ones. Allocating / deallocating creates garbage; reuse from a pool.
  • Update only "active" particles. Skip particles past their lifespan rather than checking each frame.
  • On mobile, halve particle counts. 1000 particles smooth on desktop may stutter on phone.

When to reach for this tool

  • You need a celebration / success animation for your app or website.
  • You are designing a game and want to prototype particle effects (sparks, magic, weather).
  • You are creating background animations for a landing page (snow, ambient particles).
  • You are learning canvas / WebGL animation and want a sandbox.

What this tool will not do

  • It will not handle complex physics (collisions, fluid dynamics). For those, use a physics engine (Matter.js, Cannon.js) plus particles.
  • It will not replace a real game engine's particle system. Unity, Unreal, Godot have particle editors with far more options (curves, color gradients, force fields).
  • It will not animate per-vertex effects on meshes. That is shader / vertex shader territory; see shader-playground.
  • It will not perform real-time particle interaction (mouse-following, click-emission) unless you add the event handlers — the generator gives you the foundation.

Frequently asked questions

How many particles is "too many"?

On desktop with canvas: ~5000 maintains 60fps. With WebGL: 100,000+ realistic. On mobile: halve. Test on actual target devices; do not assume desktop performance.

Are particle effects accessible?

Decorative animation is usually invisible to screen readers (no announcement). For users with motion sensitivity (vestibular disorders), respect `prefers-reduced-motion: reduce` and disable or reduce animation.

How do I make a "natural" looking effect?

Randomness within bounded ranges. Pure random looks chaotic; identical values look mechanical. Pick parameter ranges (velocity 5-10, lifespan 2-3s, size 4-8 px) and randomize within. The interplay of bounded randomness produces "natural" feel.

Should I loop the effect or play once?

Depends. Background ambient (snow, dust): infinite loop. Reactive feedback (confetti on success, sparks on click): one-shot. Continuous emission (rain, fire): loop until trigger ends.

Can I sync particles to music or sound?

Yes — Web Audio API gives real-time amplitude / frequency data. Pipe into particle parameters (emission rate, size, color). Common pattern in music visualizers and live coding.

Is canvas-confetti good enough?

For confetti specifically, yes — it is well-tuned, performant, easy to use. For other effects (fire, smoke, custom particles), use a particle library (Particles.js, tsparticles) or roll your own with canvas / WebGL.

Related tools

Shader Playground

Write and preview GLSL fragment shaders in real-time. Create stunning visual effects with WebGL. Includes preset shaders: plasma, mandelbrot, fire, raymarching

CSS Animation Builder

Build CSS keyframe animations visually with timeline editor. Create custom @keyframes. Free online CSS animation generator with live preview

3D Editor

Create and edit 3D scenes in your browser. Add primitives, transform objects, adjust materials. Export to GLTF/GLB. Free online 3D modeling tool

SVG Path Editor

Draw and edit SVG paths visually with Bezier curves. Create icons and shapes. Free online SVG path builder with code output

Last updated · E-Utils editorial team