Create stunning gradient columns with spotlight, shine, and noise effects. Fully customizable, interactive, and mobile-friendly.
Made with Workshop
Build your own component with AI
Create stunning gradient columns with spotlight, shine, and noise effects. Fully customizable, interactive, and mobile-friendly.
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.
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.
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