Premium element

Visual Effect

Border Drift

The Border Drift Effect creates a dynamic and visually striking animated border around elements using customizable colors, gradient presets, and smooth animations. Ideal for highlighting elements with interactive or decorative borders.

Preview

Border Drift

Quick Setup

data-drift-border=true

Required

Enables the Border Drift Effect on the specified element.

Available Presets

data-drift-preset="preset-name"

Optional

sunlight

ocean

sunset

emerald

amethyst

ruby

midnight

rose

golden

aqua

neon

cosmic

Custom Colors

data-drift-colors

Optional

Overrides presets with custom gradient colors. Provide a comma-separated list of colors.

Example: #FF5733,#33FF57,#3357FF

Advanced configuration

data-drift-width

Optional

Defines the thickness of the border in pixels.

Default: 2

data-drift-duration

Optional

Specifies the animation duration for a full cycle.

Default: 3s

data-drift-opacity

Optional

Sets the opacity of the border animation (0 to 1).

Default: 1

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