Premium element

Animated text

Dark Reveal

Dark Reveal creates an interactive highlight over elements using radial gradients, enhancing focus and interactivity.

Preview

Darkness reveals what light hides

Quick Setup

data-spotlight=true

Required

Enables the Dark Reveal on the specified element.

Advanced configuration

data-spotlight-inner-radius

Optional

Defines the radius of the inner transparent circle in pixels.

Default: 10

data-spotlight-outer-radius

Optional

Defines the radius of the outer opaque circle in pixels.

Default: 350

data-spotlight-mobile-inner-radius

Optional

Specifies the inner radius on mobile devices for better adaptation.

Default: 5

data-spotlight-mobile-outer-radius

Optional

Specifies the outer radius on mobile devices for better adaptation.

Default: 30

data-spotlight-color

Optional

Sets the color of the spotlight gradient.

Default: #000000

data-spotlight-opacity

Optional

Defines the opacity of the spotlight effect (0 to 1).

Default: 0.9

data-spotlight-mode

Optional

Specifies the effect mode: mouse or auto.

Default: mouse

data-spotlight-auto-speed

Optional

Sets the duration (in milliseconds) for a full auto animation cycle.

Default: 3000

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