Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
  1. Web Design
  2. CSS

2 Ways to Create an Animated Particle Background

Read Time:1 minLanguages:

In today’s screencast I’m going to show you how to create an animated particle background. Particles are a great alternative to standard hero sections on a web page; you might have seen them used on sites like marvelapp.com for example, and you could also use this effect for creating snowfall.

We’re going to look at two ways of creating particles. The first one relies solely on CSS, whilst the second uses a JavaScript plugin called particles.js.

How to Create Particles for Your Website


Here’s the example which uses CSS only:

And here’s the demo which uses particles.js:

Have fun seeing what you can do with these, and let us know in the comments where you’ve used particles in the wild!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.