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 + shine effect and 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, simply 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

Refund Policy

Please note that all purchases of this component are final and non-refundable.

As this is a digital product, it cannot be returned or exchanged once it has been downloaded. We encourage you to review the live preview/demo provided before making your purchase to ensure it meets your needs.

By completing your purchase, you acknowledge and agree to this no-refund policy.