Brush effect

The Brush Effect adds an artistic brushstroke animation to buttons or interactive elements, enhancing their visual appeal with dynamic, hand-drawn stroke patterns.

Preview

Brush effect

Quick Setup

data-brush

Required

Enables the Brush Effect on the target element.

Advanced configuration

data-brush-color

Optional

Specifies the color of the brushstroke.

Default: #3498db

data-brush-width

Optional

Defines the width of the brushstroke in pixels.

Default: 2

data-brush-duration

Optional

Specifies the animation duration of the brushstroke (in seconds).

Default: 0.8

data-brush-style

Optional

Determines the visual style of the brushstroke. Values: artistic or straight.

Default: artistic

data-brush-direction

Optional

Specifies the animation direction of the brushstroke. Values: left, right, up or down.

Default: right

data-brush-layers

Optional

Determines the number of brushstroke layers for added depth.

Default: 2

data-brush-opacity

Optional

Controls the opacity of the brushstrokes.

Default: 0.8

Visual Configurator

Documentation

GETTING STARTED

MENU ANIMATIONS

CORE BACKGROUND

SHOWCASE

VISUAL EFFECTS

ANIMATED TEXT

INTERACTION

INSTANT MOTION

SURECART

BUTTONS

TRANSITION PAGES

Brush effect

Preview

Quick Setup

Advanced configuration

We're here to help

Contact Support