New

9 buttons. Ready to use.

Spotlight Configurator - BricksFusion
data-spotlight
How to Use & Code Information
  1. Customize your spotlight effect using the controls below
  2. Click Copy JS to copy the JavaScript code to clipboard
  3. In Bricks Builder, add a Code element and paste the JavaScript
  4. To add the effect to any section: go to Section → Style → Attributes, add data-spotlight as attribute name (leave value empty)
Interactive Spotlight Preview
Spotlight Color
HEX
HSL
Effect Settings
Spotlight Effect
Spotlight Intensity
0.8
Spotlight Size
150%
Blur Amount
8px
Animation Duration
1s
Sparkle Settings
Enable Sparkles
Add magical sparkle effects to the spotlight
Sparkle Count
5
Sparkle Frequency
30%
Sparkle Size
6px
Advanced Options
Trigger Type
Scroll Start Position top bottom
Scroll End Position bottom top
Reverse on Scroll
Reverse animation when scrolling up