Premium element

Animated text

Custom Scrollbar

Custom ScrollBar allows you to replace the default browser scrollbar with a customizable and visually appealing version. You can apply gradients, set sizes, and adjust styles for both the scrollbar track and thumb using attributes or presets.

Preview

Quisque dignissim est in quam sagittis elementum. Mauris egestas turpis vitae odio efficitur tincidunt. Curabitur sit amet felis condimentum, luctus nisl sit amet, iaculis sem. Vestibulum convallis odio blandit libero imperdiet tempus. Sed blandit elit dolor. Suspendisse aliquam vestibulum lacus, at facilisis massa maximus bibendum. Aliquam erat volutpat. Fusce ultrices sagittis orci. Sed porttitor felis ullamcorper pellentesque interdum. Duis pellentesque sapien arcu, vel tincidunt ante tempus id. Aliquam eu quam scelerisque, commodo metus at, fermentum elit. Suspendisse potenti. Nam aliquet vehicula odio, a sollicitudin nulla scelerisque a. Fusce vitae libero et purus tincidunt placerat sed at velit. Donec mollis ex sed ante mollis venenatis. Curabitur et odio elit. Quisque dignissim est in quam sagittis elementum. Mauris egestas turpis vitae odio efficitur tincidunt. Curabitur sit amet felis condimentum, luctus nisl sit amet, iaculis sem. Vestibulum convallis odio blandit libero imperdiet tempus. Sed blandit elit dolor. Suspendisse aliquam vestibulum lacus, at facilisis massa maximus bibendum. Aliquam erat volutpat. Fusce ultrices sagittis orci. Sed porttitor felis ullamcorper pellentesque interdum. Duis pellentesque sapien arcu, vel tincidunt ante tempus id. Aliquam eu quam scelerisque, commodo metus at, fermentum elit. Suspendisse potenti. Nam aliquet vehicula odio, a sollicitudin nulla scelerisque a. Fusce vitae libero et purus tincidunt placerat sed at velit. Donec mollis ex sed ante mollis venenatis. Curabitur et odio elit.

Quick Setup

Wrap your scrollable content inside a 'div' with the attribute data-custom-scrollbar. The custom scrollbar will automatically apply to the content inside the wrapper.

data-custom-scrollbar=true

Required

Defines the container where the custom scrollbar is applied. Options for scrollbar size include: thin or normal (default: normal)

Advanced configuration

data-scrollbar-track-gradient

Optional

Customizes the gradient for the track (External bar). Provide colors as a comma-separated list: (e.g., "#f0f0f0,#e0e0e0").

data-scrollbar-track-angle

Optional

Adjusts the gradient angle for the track. (e.g., 45deg, 180deg).

data-scrollbar-thumb-gradient

Optional

Customizes the gradient for the thumb (Inner bar). Provide colors as a comma-separated list (e.g., "#888888,#666666").

data-scrollbar-thumb-angle

Optional

Adjusts the gradient angle for the thumb (e.g., 45deg, 180deg).

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