Particle Effect Generator

Create customizable particle animations

Preset

Preview

Settings

Particle Count120

Speed (Min)0.5

Speed (Max)2

Size Range (Min)1

Size Range (Max)5

Opacity0.9

Shape

Colors#ffffff

Gravity0

Wind0.3

Bounce

Interaction

Export

{
  "fullScreen": {
    "enable": false
  },
  "background": {
    "color": {
      "value": "transparent"
    }
  },
  "particles": {
    "number": {
      "value": 120,
      "density": {
        "enable": true
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle"
    },
    "opacity": {
      "value": {
        "min": 0.4,
        "max": 0.9
      }
    },
    "size": {
      "value": {
        "min": 1,
        "max": 5
      }
    },
    "move": {
      "enable": true,
      "speed": {
        "min": 0.5,
        "max": 2
      },
      "direction": "bottom",
      "straight": false,
      "outModes": {
        "default": "out"
      },
      "drift": 0.3
    },
    "wobble": {
      "enable": true,
      "distance": 10,
      "speed": 5
    }
  },
  "interactivity": {
    "events": {
      "onHover": {
        "enable": true,
        "mode": "repulse"
      }
    },
    "modes": {
      "repulse": {
        "distance": 80,
        "duration": 0.4
      }
    }
  }
}

What is Particle Effect Generator?

Design and preview beautiful particle animations for your website or application. Configure particle count, speed, size, color, shape, interaction behavior, and physics to create effects like snow, confetti, fireflies, or galaxy patterns. Export the configuration as ready-to-use code.

How to use

Choose a preset effect (snow, confetti, fireflies, bubbles, galaxy) or start from scratch.
Fine-tune particle properties: count, speed, size range, colors, shapes, opacity, and physics like gravity and bounce.
Preview the animation live, then copy the tsParticles JSON config or export as a standalone HTML snippet.

Result

A web developer selects the snow preset, increases particle count to 200, adds a slight wind drift, and copies the config JSON to add a winter effect to their holiday landing page.

Related Tools

Texture Generator

Create procedural textures and patterns

Org Chart Maker

Create organizational hierarchy charts

CSS Animation Generator

Build CSS keyframe animations visually

YouTube Thumbnail Maker

Design eye-catching YouTube thumbnails

Word Cloud Generator

Create visual word clouds from text

Timeline Maker

Create visual timelines for projects and events