# Particle effects: dust, sparks and light in moving designs

[Canonical HTML page](https://gradiently.design/guide/particles-effect)

A few specks of drifting light can make a flat background feel like a place. Too many make it look like a screensaver. Here is how to choose, tune and export particles so they add atmosphere and nothing else.

## The short version

- A particle effect is an animation made of many small points, each with its own position, size, speed and opacity, such as dust, sparks, embers, snow or stars.
- Particles look best when they are few, small, slow and varied in size, with the largest and brightest ones used sparingly.
- Keeping particles away from text, or quieter behind it, protects legibility.
- Fine moving particles are hard for video compression, so export particle loops as MP4 at a good quality rather than as GIF.
- On websites, particle animations should stop for visitors who ask for reduced motion.

A **particle effect** is an animation made of many tiny points that each move on their own: dust floating in a beam of light, embers rising from a fire, stars, snow, sparks or mist. In a moving design, particles add depth and atmosphere to a background without competing with the words, as long as you keep them few, small and slow. The skill is restraint: particles should be something people feel before they notice.

## How a particle effect works

Every particle is a small set of numbers: where it is, how big it is, how fast and in which direction it moves, how visible it is, and sometimes how long it lives. The effect comes from hundreds of slightly different particles following the same simple rule. Change the rule and the same dots become a completely different mood.

| Particle style | How it moves | Mood | Suits |
| --- | --- | --- | --- |
| Dust | Tiny, drifts slowly in any direction | Quiet, warm, cinematic | Coffee, books, interiors, calm brands |
| Embers | Small and bright, rises and fades | Warm, energetic | Restaurants, music, winter events |
| Stars | Still or barely moving, twinkles | Night, wonder | Late events, astronomy, sleep, launches |
| Mist | Large, soft, very faint, slides sideways | Mysterious, soft | Wellness, beauty, perfume |
| Swarm | Moves together in loose groups | Alive, busy | Tech, data, nature |
| Snow | Falls steadily with a slight sway | Seasonal, cosy | Winter campaigns, holiday posts |

Six particle styles and where each one belongs. Pick the motion that matches the feeling, not the one that looks most impressive.

## Making particles subtle

The difference between atmosphere and a screensaver is almost always quantity and speed. These settings keep particles in the background where they belong.

### Screensaver

- Hundreds of large, bright dots
- All the same size and speed
- Fast, busy movement
- Pure white on every background
- Drifting straight through the headline

### Atmosphere

- A modest number, mostly tiny
- Mixed sizes: many small, a few larger and softer
- Slow enough that you have to look twice
- Tinted in the background's own colours
- Thinner or calmer where the words sit

Vary size and opacity to suggest depth: small, sharp, faint particles read as far away, and a few larger, softer ones read as close to the lens. Nearer particles should also move a little faster, which is the same trick behind [parallax](https://gradiently.design/guide/parallax-effect).

- Charred ground: #1a0f0a
- Deep rust: #7c2d12
- Ember: #ea580c
- Spark: #fdba74
- Hot core: #fff7ed

An ember palette. Particles take the two lightest tones, so they glow as part of the background rather than sitting on top of it in white.

## Particles and text

A bright speck drifting across a letter makes it flicker, and a field of them makes small type hard to read. Keep the words in a calmer area of the frame, thin the particles out behind them, or make the type large enough that a passing speck doesn't matter. Never add a glow behind the words to rescue them: a calmer background does the job better. [Text on a gradient](https://gradiently.design/guide/text-on-gradient) covers contrast in moving backgrounds.

A portrait event post reading Bonfire night supper, 5 November, over a dark warm background with ember particles

Embers suit an evening event: warm specks rising slowly through a dark ground, with the date in the calm upper area.

A vertical story reading Slow mornings for a café called The Reading Room, with faint dust particles in soft light

Dust for a café story: barely visible, catching the light, never crossing the words.

## Where a particle effect earns its place

Particles reward a screen people look at for more than a second. On a feed post that is scrolled past, they barely register; on a story, a screen in a shop or a website hero, they give the eye something quiet to rest on.

- **Stories and Reels backgrounds**, where a full screen frame is held for several seconds.
- **Screens in venues**: menu boards, reception screens and window displays that loop all day. See [ambient video](https://gradiently.design/guide/ambient-video).
- **Website heroes**, as a light layer over a gradient, stopped for visitors who prefer reduced motion.
- **Event and launch countdowns**, where embers or stars set the mood of the night itself.
- **Phone and desktop wallpapers**, where slow dust or stars never tire. See [live wallpaper](https://gradiently.design/guide/live-wallpaper).

## Looping and exporting particle effects

1. **Make the loop seamless** Particles that leave one edge should reappear at the opposite edge, so the last frame flows into the first. [Seamless loops](https://gradiently.design/guide/seamless-loop-video) explains the method.
2. **Export MP4, not GIF** GIF has only 256 colours per frame, and tiny moving dots on a soft gradient turn into speckled noise. MP4 handles them far better.
3. **Give the video enough quality** Fine moving detail is hard to compress. If particles smear or vanish, export at a higher quality or reduce how many there are.
4. **Check it on a phone** Platforms recompress uploads. Post privately or send it to yourself first, and make sure the particles survived.

Banding and particles often appear together on dark backgrounds; [gradient banding](https://gradiently.design/guide/gradient-banding) has the fixes. [GIF vs MP4](https://gradiently.design/guide/gif-vs-mp4) explains why video wins for moving detail.

## A particle effect in CSS and canvas

On a website, a light particle layer is best drawn on a `canvas` element placed over the background, with `pointer-events: none` so it never blocks clicks. This script draws drifting dust and respects visitors who have asked for less motion: they see the particles still.

```js
const canvas = document.querySelector('canvas.dust');
const ctx = canvas.getContext('2d');
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
const dpr = Math.min(window.devicePixelRatio || 1, 2);
let w = 0, h = 0;

function resize() {
  w = canvas.clientWidth;
  h = canvas.clientHeight;
  canvas.width = w * dpr;
  canvas.height = h * dpr;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  draw();
}

const dust = Array.from({ length: 70 }, () => ({
  x: Math.random(), y: Math.random(),
  r: 0.5 + Math.random() * 1.5,        // mostly tiny
  speed: 0.00002 + Math.random() * 0.00006,
  alpha: 0.15 + Math.random() * 0.45,
}));

function draw() {
  ctx.clearRect(0, 0, w, h);
  ctx.fillStyle = '#fde68a';
  for (const p of dust) {
    ctx.globalAlpha = p.alpha;
    ctx.beginPath();
    ctx.arc(p.x * w, p.y * h, p.r, 0, Math.PI * 2);
    ctx.fill();
  }
}

let last = performance.now();
function tick(now) {
  const dt = now - last; last = now;
  for (const p of dust) {
    p.y -= p.speed * dt;               // drift upwards
    if (p.y < -0.02) p.y = 1.02;       // wrap to the bottom
  }
  draw();
  requestAnimationFrame(tick);
}

window.addEventListener('resize', resize);
resize();
if (!reduce) requestAnimationFrame(tick);
```

Seventy specks of warm dust drifting upwards. Give the canvas `position: absolute; inset: 0; pointer-events: none;` over your hero.

Keep the count modest on phones, where every particle costs battery. [Prefers reduced motion](https://gradiently.design/guide/reduced-motion) explains the media query in full.

## Particles in Gradiently

In Gradiently, particles are part of a Mark: fine grain drifting in the Mark's own colours, so they are tinted to belong rather than pasted on in white. When you export a moving design with Pro, you can keep the design's own particles, switch them off, or try another style such as dust, stars, mist, swarm, silk or embers. Choose the Still movement and the background holds while only the particles move. Loops export seamlessly from 5 to 30 seconds, and a still export settles the particles exactly as they rest in the design.

## FAQ

### What is a particle effect?

An animation made of many small points that each move independently, used to create dust, sparks, embers, snow, stars or mist in a design or video.

### How do I make a particle effect look subtle?

Use fewer particles, mostly tiny, moving slowly, in a mix of sizes and tinted in the background's own colours, and keep them calmer behind text.

### Should I export a particle animation as GIF or MP4?

MP4. GIF is limited to 256 colours per frame, so fine particles on a gradient become speckled noise, while MP4 keeps them smooth.

### Can I make a particle effect with CSS?

A few particles can be animated with CSS, but a canvas element with a little JavaScript handles dozens or hundreds far more efficiently. Stop the motion for visitors who prefer reduced motion.