Noise Background

A dynamic background effect with animated gradients, noise texture, and smooth motion.

Installation

npx shadcn@latest add @aceternity/noise-background

Learn how to create a bento grid with Tailwind CSS, Next.js and Framer Motion.

Prop	Type	Default	Description	Required
`children`	`React.ReactNode`	-	Content to display inside the background container.	No
`className`	`string`	-	Additional CSS classes to apply to the content wrapper.	No
`containerClassName`	`string`	-	Additional CSS classes to apply to the container.	No
`gradientColors`	`string[]`	`["rgb(255, 100, 150)", "rgb(100, 150, 255)", "rgb(255, 200, 100)"]`	Array of gradient colors for the animated layers.	No
`noiseIntensity`	`number`	`0.2`	Opacity/intensity of the noise texture overlay (0-1).	No
`speed`	`number`	`0.1`	Speed multiplier for the gradient animation movement.	No
`backdropBlur`	`boolean`	`false`	Whether to apply backdrop blur effect to the container.	No
`animating`	`boolean`	`true`	Whether the gradient animation should be active.	No

Next.js 15, Tailwind CSS v4 and Motion for react powered templates

100+ templates and blocks combined

Ready to copy paste component blocks, save days of development time