Gradient Columns

Create stunning gradient columns with spotlight, shine, and noise effects. Fully customizable, interactive, and mobile-friendly.

Behavior

Gradient Columns is a dynamic background component that brings depth and interactivity to your designs. It features animated gradient columns with a spotlight and shine effect, along with a subtle noise texture, making sections stand out. On mobile devices, it seamlessly animates automatically since there’s no cursor support.

Usage

Like any background element, place Gradient Columns inside a section, set its positioning to Absolute, and pin it to all sides to cover the full width and height. Then, add your content above it.

Important Notes:

• After setting Absolute, remove the z-index from the component, or it may hide your content.

• Increase the z-index of the content placed above it to 1 or more.

• For best results, set Pointer Events to None on the content above, so mouse interaction with the background feels seamless.

Customizations

Gradient Columns comes with a wide range of controls to make it your own:

• Up to 8 gradient colors

• Mirror Gradient (Yes/No)

• Shine direction (Left/Right)

• Column angle, count, and minimum width

• Noise strength

• Spotlight softness, radius, and opacity

• Distortion amount

• Mouse dampening

• Animation duration (mobile only)

• Z-Index control