Background Smoking Cursor Effect

Updated on August 30, 2024
Table of Contents

With this widget, you can add a colorful background smoke mouse cursor effect on the whole page or a particular container/section.

LIVE WIDGET LINK

Required Setup

  • Elementor FREE Plugin installed & activated.
  • You need to have the WDesignKit plugin installed and activated.
  • Make sure you’ve created an account and logged into it.
  • This is a pro widget, so make sure you have either WDesignKit pro license or have activated The Plus Addons for Elementor pro key in your WDesignKit account.
  • Make sure you’ve downloaded the Background Smoking Cursor Effect widget.

How to Activate the Blurred Text Reveal Widget?

Go to 

  • WDesignKit → Widgets. 
  • Search the widget name and select Elementor as the Page Builder.
  • Click on the Download icon.

How to Use the Background Smoking Cursor Effect Widget in Elementor?

Add the Background Smoking Cursor Effect widget to the page.

From the Apply to dropdown, you have to select where you want to add the background smoke effect. Here you’ll find two options – 

  • Body – To add the background smoke cursor effect on all the containers of the page.
  • Container/Section – To add the background smoke cursor effect on a particular container or section.

Note: When you select Container/Section, you can add a CSS ID to the container or section you want to target and add the same in the Container/Section ID field. If you don’t add any CSS ID it will target its parent container.

By enabling the Onload Glimpse toggle, you can show the background smoke effect one time on the page load.

From the Resolution dropdown, you can set the smoke trail resolution.

Then, from the Density field, you can set the color density from 0 to 4, where 0 is the highest density and 4 is the lowest.

From the Velocity field, you can control the velocity of the smoke trail.

From the Radius field, you can set the color smoke radius (size).

You can adjust the smoke trail force in response to mouse movement from the Force field.

You can control the number of color changes on mouse movement from the Color Update Speed field.

Note: You have to adjust the z-index value of other elements to keep them clickable.

Now depending on your settings when you move around your mouse you’ll see a beautiful background smoke effect.

Related Docs
123