`) then the only
styling that should be necessary is to set the width/height of the canvas [using the
`width` and `height` parameters](#parameters).
---
## placing the Sparticles in the page's background
To place the Sparticles in the background of a web-page, you'll need to add a
container to the `` which the canvas can sit in, then `position` it `fixed`:
```html
```
Then we set up the CSS styling for the Sparticles container depending on our
situation:
```css
.sparticles-container {
position: fixed;
left: 0; right: 0;
top: 0; bottom: 0;
/** use z-index to position either above or behind the body content */
z-index: 2;
/** use pointer-events: none; to prevent the particles from blocking user interaction */
pointer-events: none;
}
```
Finally we can initiate the Sparticles with the `.sparticles-container`
as the DOM element it's bound to:
```js
let container = document.querySelector(".sparticles-container");
let mySparticles = new Sparticles( container, { color: "red" });
// no need for width/height as the canvas will fill
// the container which is fixed to the viewport size
```
## fading particles at the edges (radial gradient mask)
To make particles fade toward the edge of the canvas instead of clipping sharply, you can
apply a **radial gradient mask** to the Sparticles container. The mask makes the center
opaque and the edges transparent, so particles appear to soften and disappear as they
approach the border.
Add `mask-image` (and `-webkit-mask-image` for Safari) to the same container you use for
the canvas:
```css
.sparticles-container {
/* Fade particles at the edges; center stays fully visible */
mask-image: radial-gradient(
farthest-side,
black 50%,
transparent 100%
);
mask-mode: alpha;
-webkit-mask-image: radial-gradient(
farthest-side,
black 50%,
transparent 100%
);
-webkit-mask-mode: alpha;
}
```
- **`mask-mode: alpha;`** — ensures the mask is applied as an alpha channel, not a color.
- **`farthest-side`** — Size of the visible circle (adjust to control how far from the center the fade starts).
- **`black 50%, transparent 100%`** — black = visible, transparent = hidden; tweak the percentage to make the fade steeper or gentler.
# performance
Sparticles is really quite fast!
It was designed to be the smallest (_within reason_) and fastest performing
particles script with such a large feature set!
Some other popular particle scripts will eat up to 50% of your CPU to
render 1,000 particles. Sparticles will do the same while only using 9%
and will run at a buttery 120fps if your device can refresh that fast!
Sparticles was built because other offerings in the space were either
doing way too much and adding too many `kb` to load, or they were just
too slow and unable to serve enough particles to lower end devices
without chugging along jankily!
I used to get a lot of requests from Editorial/Content teams who wanted
snow/sparkles/whatever on their home page during events, and I either had
to reject because the plugins were killing our user's devices or accept
and live knowing I've failed the users/customers! 😢 ~~ so Sparticles should fix that!
## mobile
- ℹ **It's quite easy to achieve 120fps+ with over 1,000 particles on a decent computer!**
- ⚠ _But please remember **your users are not all running super-computers** with GPUs, they
are [**probably on a mobile phone**](https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/).
Please avoid running heavy animations on phones! If you really have to then I'd advise reducing the particles down to 100 or less for a mobile device!_
Please take care of your mobile users! They are probably your primary user if you're
running a commercial or non-tech website! use a script like below to determine the amount
of particles based on their device;
```js
let myElement = document.getElementById("myDiv");
// PLEASE DON'T PUSH A TON OF ANIMATION ON MOBILES!
let count = (/Mobi|Android/i.test(navigator.userAgent)) ? 100 : 500;
let mySparticles = new Sparticles(myElement, { count: count }, 400);
```
# why "Sparticles" ?
```
particles + [ speed ⚡ | snow ❄ | sparkles ✨ | stars ⭐ ] = Sparticles 🌈
```