9 animated backgrounds, combined tastefully: a restraint guide
Motion on a web page is atmosphere when done well and noise when done badly. The same snowfall looks like a dirty screen on a pure white page, and like a window onto winter over dark frosted glass.
Below is every effect, with the base it suits, a sensible density, and the situations where you should skip it. All screenshots use the same page and the same window size — only the scheme and the effect change.
1. Effects and colour schemes are two separate switches
This is the most misunderstood part:
- Master switch off — schemes and effects stop together;
- "Apply scheme" off — no tint at all, but effects keep playing.
The second one is genuinely useful. Some days you don't want colour, you just want the page to be alive:
⬆️ With "Apply scheme" off: the page stays as it is, only the snow moves
2. Light pages: snow, bubbles, leaves, grain
These four are light, continuous and undemanding — good for daytime work, documentation, reading.
⬆️ Frosted glass + snow: on a light page the flakes are pale violet, not white mush
⬆️ Frosted glass + bubbles: rising from the bottom, drifting right, fading near the top
⬆️ Frosted glass + leaves: each leaf spins as it falls — an autumn reading mood
⬆️ Frosted glass + grain: the most restrained of the nine, close to film grain
| Effect | Feel | Suggested density | Skip it when |
|---|---|---|---|
| Snow | Quiet, seasonal | 30–50 flakes | You're reading dense tables |
| Bubbles | Light, product-page energy | 6–8 | Watching video |
| Leaves | Warm, reading-oriented | 12–20 | It's summer and it bothers you |
| Grain | Least intrusive, adds texture | 0.4–0.6 intensity | The page is meant to be minimal |
3. Dark pages: stars, meteors, fireflies, fireworks
Dark pages are where these four belong. Dark frosted glass already dims the page, so particles finally have contrast to work with.
⬆️ Obsidian Night + stars: glowing points, cleanest of the set
⬆️ Obsidian Night + meteors: a few diagonal streaks — more of an "event" than a texture
⬆️ Obsidian Night + fireflies: slow drifting points that breathe in and out
⬆️ Obsidian Night + fireworks: launch, burst, fall — the loudest option
| Effect | Feel | Suggested density | Skip it when |
|---|---|---|---|
| Stars | Calm, best for all-day | 60–100 | Bright rooms (not enough contrast) |
| Meteors | Rhythmic, occasional | 3–5 | You need to focus on code |
| Fireflies | Soft, breathing | 20–30 | You want complete stillness |
| Fireworks | Strong, festive | 5–7 | Meetings, screen sharing |
4. Stacking: two at most, one still and one moving
Every effect toggles independently and they stack freely, but the returns fall off fast. The most comfortable combinations are "one still ambience + one low-frequency event":
⬆️ Obsidian Night + stars + snow: stars as the base, snow drifting slowly
Three rules:
- Never stack two high-frequency effects. Snow plus leaves means the page never rests; ten minutes later you'll turn both off.
- One still, one moving is stable: stars (still) + snow (moving), grain (still) + fireflies (moving).
- Light and dark pages carry separate settings. The same effect swaps to a violet palette on light pages and cool cyan/white on dark ones, with no manual work.
5. Rain: the one that needs a warm base
Rain is the only effect that really needs a base colour. On a pure white page it is nearly invisible; over a warm tint it finally reads:
⬆️ Dawn Eye Care + rain: warm background, fine streaks — like watching weather through a window
6. Performance: off means off
Everything is pure CSS animation (@keyframes with negative delays) — no requestAnimationFrame loop, no persistent timers:
- All effects off: no effect nodes are inserted, zero cost;
- One effect on: tens to about a hundred nodes, unnoticeable on a normal laptop;
- All nine at once is genuinely heavy and nobody needs that.
If scrolling a long page stutters, turn off fireworks and rain first — they carry the most nodes.
7. A combination you can copy
| Time of day | Scheme | Effect |
|---|---|---|
| Morning, coding | Misty Veil 30% | Grain 0.5 |
| Afternoon, research | Green Field Warm Sun 35% | Snow, 40 flakes |
| Evening, long read | Warm Paper 45% | Leaves, 15 |
| Late night | Obsidian Night | Stars, 80 |
| Weekend, wants noise | Obsidian Night | Fireworks, 6 |
The point of an effect is not quantity, it's making you willing to stay a little longer. Pick one, live with it all day, and if it never annoys you, the density is right.
Related reading