Preferences

Gradient Bars Background

Customize

Bars12

Animation Duration3.5

Noise0

Props

Property	Type	Default	Description
`numBars`	number	`7`	How many bars are drawn across the width. Odd numbers stay symmetric around the center.
`gradientFrom`	string	`"rgb(255, 60, 0)"`	Bar color at the anchored edge of the linear gradient (any CSS color string).
`gradientTo`	string	`"transparent"`	Bar color at the far edge of the gradient, fading out by default.
`direction`	string	`"bottom"`	Which edge the bars grow from and anchor to: "bottom" or "top".
`animationDuration`	number	`2`	Seconds per pulse cycle for the scaleY breathing animation.
`noise`	number	`0`	Grayscale static/grain intensity inside each bar, from 0 to 1. 0–0.5 fades in a single fine-grain layer; above 0.5 a second, coarser layer stacks on top so the grain keeps intensifying. Flickers to a new random offset roughly every 50ms and fades out together with the gradient toward gradientTo.
`backgroundColor`	string	`"rgb(10, 10, 10)"`	Section background rendered behind the bars.
`className`	string	`""`	Extra classes applied to the bars wrapper div.
`children`	ReactNode	`undefined`	Content rendered centered above the bars (headline, controls, etc.).
`demoContent`	boolean	`false`	Demo-only toggle to overlay sample content on the background preview (not a real component prop).

numBarsnumber

How many bars are drawn across the width. Odd numbers stay symmetric around the center.

Default7

gradientFromstring

Bar color at the anchored edge of the linear gradient (any CSS color string).

Default"rgb(255, 60, 0)"

gradientTostring

Bar color at the far edge of the gradient, fading out by default.

Default"transparent"

directionstring

Which edge the bars grow from and anchor to: "bottom" or "top".

Default"bottom"

animationDurationnumber

Seconds per pulse cycle for the scaleY breathing animation.

Default2

noisenumber

Grayscale static/grain intensity inside each bar, from 0 to 1. 0–0.5 fades in a single fine-grain layer; above 0.5 a second, coarser layer stacks on top so the grain keeps intensifying. Flickers to a new random offset roughly every 50ms and fades out together with the gradient toward gradientTo.

Default0

backgroundColorstring

Section background rendered behind the bars.

Default"rgb(10, 10, 10)"

classNamestring

Extra classes applied to the bars wrapper div.

Default""

childrenReactNode

Content rendered centered above the bars (headline, controls, etc.).

Defaultundefined

demoContentboolean

Demo-only toggle to overlay sample content on the background preview (not a real component prop).

Defaultfalse

Crafted withbyMohammad Tasin