---
title: "How to Add Particle Effect to a WordPress Container Background?"
url: https://nexterwp.com/docs/add-particle-effect-to-a-wordpress-container-background/
date: 2024-11-28
modified: 2026-05-14
author: "Aditya Sharma"
description: "Do you want to add a particle effect to a section in WordPress? Particle effects create animated motion in a container background, adding depth and interactivity to hero sections, banners,..."
image: https://nexterwp.com/wp-content/uploads/2024/11/How-to-Add-Particle-Effect-to-a-WordPress-Container-Background-1024x519.jpg
word_count: 273
---

# How to Add Particle Effect to a WordPress Container Background?

## Key Takeaways

- Nexter Blocks Container block adds particle animation to any section background in WordPress through Style > Background Middle Layer.
- Canvas Effect offers a predefined effect or a Custom Skin option, and Custom Skin requires particle json code from a particle generator.
- Particle effects fit hero sections, banner areas, feature or service sections, and landing pages with brand colors for visual distinction.

Do you want to add a particle effect to a section in WordPress? Particle effects create animated motion in a container background, adding depth and interactivity to hero sections, banners, and feature areas without any custom code.

With the [Container block](https://nexterwp.com/docs/add-a-container-in-wordpress/) from Nexter Blocks, you can add particle animation to any section background in WordPress.

**Best Used For:**

- Hero sections and banner areas where animated particles make the first impression more engaging

- Feature or service sections where subtle motion in the background adds visual distinction without competing with the content

- Landing pages where a custom particle skin with brand colors reinforces visual identity

*To check the complete feature overview documentation of the Nexter Blocks Container block, [click here](https://nexterwp.com/docs/add-a-container-in-wordpress/).*

***Requirement – This block is a part of Nexter Blocks. Make sure it is installed and activated.***

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-container/)

Add the Container block with the appropriate layout to the page and follow the steps.

1. Go to **Style** > **Background Middle Layer**.

2. Select **Canvas Effect** from the **Select Background Option** dropdown.

3. Then from the **Canvas Style** dropdown list, choose a predefined effect or add a custom effect by selecting the **Custom Skin** option.

You will get options to change the particle color along with some additional settings for some effects.

> *Note:* *To use the Custom Skin option you have to add the particle json code, for this, you can use this *[*particle generator*](https://vincentgarreau.com/particles.js/)*.*

Now you will see an animated particle background.

> *Note:* *For better visibility, you can add a normal background color to the container.*

To explore other container background options in Nexter Blocks, see the [Parallax Effect](https://nexterwp.com/docs/add-parallax-effect-to-a-container-in-wordpress/) and [Video Background](https://nexterwp.com/docs/add-a-video-background-in-a-wordpress-container/) docs.