Cursor & Trail Effects

Cursor & Trail Effects is a Divi Essential extension that replaces or enhances the default browser cursor with custom animated cursors and pointer trails. With multiple cursor styles and trail types, dual-color configuration, size control, and a smooth follow speed setting — you can give your site a unique, premium interactive feel with zero code.

⚠️ Important: Cursor & Trail Effects is a site-level Extension, not a module. Once enabled, the custom cursor applies across all pages of your site on desktop devices. It does not appear as a standalone module in the Divi Builder.

How to Enable

Step 1: Go to WordPress Admin → Divi Essential → Extensions

Step 2: Find Cursor & Trail Effects and toggle it On

Step 3: Open any page in the Divi Builder

Step 4: Go to the page-level or section-level settings → Cursor & Trail Effects

Step 5: Toggle Enable Cursor Effect on and configure your style

Settings Reference

Enable Cursor Effect

Type: Toggle Default: Off Activates the custom cursor and trail effect site-wide. All other settings become visible once this is enabled.

Effect Type

Type: Dropdown Default: Cursor: Circle Follower

Choose the cursor style or trail type. Effects are organized into two groups:

Cursor Styles — replaces or augments the default cursor:

• Circle Follower, Dot, Ring, Ring + Dot, Crosshair, Blob, Spotlight Cursor, Magnetic Dot, and more

Trail Effects — leaves an animated trail behind cursor movement:

• Dot Trail, Bubble Trail, Spark Trail, Star Trail, Ribbon Trail, Smoke Trail, Line Trail, and more

Primary Color

Type: Color Picker + Opacity Default: #00D4AA at 100%

Sets the main color of the cursor or trail element. For Circle Follower and similar cursor styles, this fills the cursor shape. For trail effects, this colors the leading trail elements.

Secondary Color

Type: Color Picker + Opacity Default: #7C3AED at 100%

Sets the accent or trailing color. Used for dual-color cursor styles and for the fading tail of trail effects — creates a gradient-like color transition between Primary and Secondary Color as the cursor moves.

Cursor Size

Type: Slider Unit: px Default: 30px

Controls the diameter of the cursor element. Applies to all cursor styles (Circle Follower, Ring, Blob, etc.). For trail effects, this sizes individual trail particles.

Follow Speed

Type: Slider Unit: px Default: 0.3px

Controls how quickly the custom cursor element catches up to the actual mouse pointer position.

• Lower values (0.1–0.2px): More delay — smooth, fluid, "lagging" follow feel
• Default (0.3px): Balanced — responsive but still noticeably smooth
• Higher values (0.7–1px): Cursor snaps almost instantly to pointer — removes the smooth motion

Pro Tips

💡 Use contrasting Primary and Secondary Colors The two-color system creates a gradient-like blending effect in motion. A teal (#00D4AA) primary and purple (#7C3AED) secondary is the default for a reason — the contrast is striking without clashing.

💡 Set Follow Speed to 0.2–0.3px for the smoothest feel This range creates a satisfying "lag" that makes the cursor feel fluid and premium. Below 0.1px feels too slow; above 0.6px the smooth motion effect disappears entirely.

💡 Larger Cursor Size (40–60px) works well with trail effects Trail effects with bigger particles are more visually impactful. For cursor-only styles, keep size between 20–35px.

💡 Match Primary Color to your brand accent Since the cursor is visible on every page, keeping it on-brand matters. Use your primary CTA or accent color as the Primary Color.

💡 Test across browsers before publishing CSS cursor rendering varies between Chrome, Firefox, and Safari. The Circle Follower and Dot styles are the most consistent cross-browser performers.