Gradient Bars

Animated striped gradient bars

gradient-bars-tw

Customize

Tweak the props live

Bars

Bar Count8

Gradient Power0.2

Balance0.15

Mirror Repeat2

Vertical

Animation

Speed0.1

Phase Spread4

Phase Range2

Alternate Direction0

Invert Speed0.2

Curve Power1

Easing Mode

Color

Tint Color

#000000

Background

#FFFFFF

Opacity1

Cursor Interaction

Props

Name	Type	Default	Description
`width`	string \| number	`"100%"`	Container width
`height`	string \| number	`"100%"`	Container height
`className`	string	`""`	Additional CSS classes for styling
`children`	ReactNode	`undefined`	Content rendered above the effect
`barCount`	number	`8`	Number of stripes (1–32)
`gradientPower`	number	`0.2`	Gradient curve exponent (0–1)
`balance`	number	`0.15`	Black/white balance (0–1)
`speed`	number	`0.1`	Animation speed (0–2)
`phaseSpread`	number	`4`	Phase offset between stripes (0–16)
`mirrorRepeat`	number	`2`	Horizontal mirror repetitions (1–8)
`alternateDirection`	number	`0`	Alternate direction on odd stripes (0–1)
`invertSpeed`	number	`0.2`	Speed of direction inversion oscillation (0–2)
`phaseRange`	number	`2`	Phase multiplier for animation range (1–16)
`curvePower`	number	`1`	Easing curve power (1=linear, 2=quad, 3=cubic, etc.)
`easingMode`	number	`0`	Easing mode: 0=in, 1=out, 2=in-out
`vertical`	boolean	`true`	Use vertical columns (true) or horizontal rows (false)
`color`	string	`"#ffffff"`	Tint color in hex format
`backgroundColor`	string	`"#000000"`	Background gradient color in hex format
`opacity`	number	`1`	Master opacity (0–1)
`cursorInteraction`	boolean	`false`	Enable cursor interaction to shift the phase offset

widthstring | number

Container width

Default:"100%"

heightstring | number

Container height

Default:"100%"

classNamestring

Additional CSS classes for styling

Default:""

childrenReactNode

Content rendered above the effect

Default:undefined

barCountnumber

Number of stripes (1–32)

Default:8

gradientPowernumber

Gradient curve exponent (0–1)

Default:0.2

balancenumber

Black/white balance (0–1)

Default:0.15

speednumber

Animation speed (0–2)

Default:0.1

phaseSpreadnumber

Phase offset between stripes (0–16)

Default:4

mirrorRepeatnumber

Horizontal mirror repetitions (1–8)

Default:2

alternateDirectionnumber

Alternate direction on odd stripes (0–1)

Default:0

invertSpeednumber

Speed of direction inversion oscillation (0–2)

Default:0.2

phaseRangenumber

Phase multiplier for animation range (1–16)

Default:2

curvePowernumber

Easing curve power (1=linear, 2=quad, 3=cubic, etc.)

Default:1

easingModenumber

Easing mode: 0=in, 1=out, 2=in-out

Default:0

verticalboolean

Use vertical columns (true) or horizontal rows (false)

Default:true

colorstring

Tint color in hex format

Default:"#ffffff"

backgroundColorstring

Background gradient color in hex format

Default:"#000000"

opacitynumber

Master opacity (0–1)

Default:1

cursorInteractionboolean

Enable cursor interaction to shift the phase offset

Default:false