Gradient Strips — Animated gradient bars for backgrounds

Choose how the bars scale across the width:

• valley

• hill

• rounded-hill

• wave

• ramp-left

• ramp-right

• flat

Each shape influences vertical scale distribution and works together with gradient angle spread for different visual rhythms.

Color control

Use curated presets:

• soft

• neon

• sunset

• pink-sunset

Switch to custom colors when full control is needed. Define gradient From and To range, add subtle hue or intensity drift, and experiment with blend modes for layered compositions.

Motion behavior

Appear animations:

• scale

• fade

• fade-slide

Control order and stagger for progressive reveals. Add looping pulse with three modes: pulse, gentle-pulse, or none. The component respects prefers-reduced-motion automatically.

Visual extras

• Optional edge feather masking

• Optional noise overlay

• Extra glow layer for full-height flat ribbed mode

All effects can be disabled individually.

Who it’s for

Designers building high-impact hero sectionsTemplate creators who need reusable animated backgroundsBrands adding motion without importing video assets

Return policy

Due to the digital nature of this product, purchases are non-refundable. If you run into issues, reach out and I will help you get it working as intended.