Gradient Columns

Give your sections immediate visual impact with animated gradient columns featuring spotlight, shine, and noise textures. It turns even the simplest layout into a premium, cinematic hero—no redesign required.

Gradient Columns reacts to the cursor on desktop and animates automatically on mobile. Motion is smooth, subtle, and performance-optimized, so it looks stunning without adding lag.

Why designers love it

• Instantly elevates a section without changing layout

• Adds depth and motion that feel premium, not distracting

• Mobile-first animation with automatic fallback (no cursor needed)

• Works with any frame size — headers, hero sections, banners, and footers

• Performance-tuned for desktop and mobile

Customization Categories

• Gradient controls (up to 8 colors, mirror mode, angle)

• Spotlight & shine controls (direction, softness, opacity, radius)

• Motion controls (distortion, mouse dampening, mobile animation speed)

• Styling controls (column count, width, noise intensity, z-index)

Setup — quick and easy

1. Place Gradient Columns into a section

2. Set it to Absolute and stretch to fill

3. Add your content above it — done

After completing your purchase, you will receive a link to the component.

Copy the URL and paste it into your Framer project to import it.