CYBERWEEK Last dayCode: CYBER35

Particle Glow

PREVIEW

Particle glow

Try me

OceanSunsetForestNeonGrapeFireEarthBerryCandy

What is it?

Particle Glow adds a captivating visual effect that combines animated text gradients with glowing particles in the background, creating a dynamic and eye-catching experience. The text features a moving gradient, while particles gracefully float around the section.

How to set it up?

This element is customized using the Bricks Builder attributes field. Particle Glow utilizes the following attributes:

'data-particle-glow'. Activates the particle glow effect on the specified container. No value is needed; adding this attribute enables the functionality.

'data-bg-preset'. Sets the color scheme for the background particles. The options are the same as those for the text gradient. If not specified, the ocean preset will be applied by default.

'data-custom-bg-color' (Optional). Allows you to specify a custom color for the background particles.

'data-particle-count' (Optional). Specifies the number of glowing particles displayed. The default is 60 if not specified.

'data-particle-glow-text'. Defines the text element that will have the animated gradient effect applied.

'data-color-preset'. Sets the color scheme for the text gradient. The preset values should be specified exactly as listed below:

  • ocean
  • sunset
  • forest
  • neon
  • cosmic
  • fire
  • earth
  • berry
  • sky
  • grape
  • steel
  • candy

'data-custom-gradient' (Optional). Allows you to define a custom gradient for the text by providing a comma-separated list of colors (e.g., #ff0000,#00ff00,#0000ff).

Important Note

  • You can mix different presets for the text gradient and background particles by setting distinct values for the data-color-preset and data-bg-preset attributes. This allows for unique visual combinations to enhance your design.
  • Custom gradients or particle colors can be specified using the optional attributes data-custom-gradient and data-custom-bg-color. These will override the preset values if provided.

We're here to help

Choose how you'd like to connect with our support team

Contact Support

Get help from our team of experts

Response within 24 hours