Dotted Glow Background

A background effect with opacity animation, glow effect and more.

The modern call scheduling app

→

Installation

npx shadcn@latest add @aceternity/dotted-glow-background

Unlock premium components, advanced animations, and exclusive templates to build stunning modern interfaces.

Prop	Type	Default	Description	Required
`className`	`string`	-	Additional CSS classes to apply to the container.	No
`gap`	`number`	`12`	Distance between dot centers in pixels.	No
`radius`	`number`	`2`	Base radius of each dot in CSS pixels.	No
`color`	`string`	`"rgba(0,0,0,0.7)"`	Dot color (will pulse by alpha).	No
`darkColor`	`string`	-	Optional dot color for dark mode.	No
`glowColor`	`string`	`"rgba(0, 170, 255, 0.85)"`	Shadow/glow color for bright dots.	No
`darkGlowColor`	`string`	-	Optional glow color for dark mode.	No
`colorLightVar`	`string`	-	Optional CSS variable name for light dot color (e.g. `--color-zinc-900`).	No
`colorDarkVar`	`string`	-	Optional CSS variable name for dark dot color (e.g. `--color-zinc-100`).	No
`glowColorLightVar`	`string`	-	Optional CSS variable name for light glow color.	No
`glowColorDarkVar`	`string`	-	Optional CSS variable name for dark glow color.	No
`opacity`	`number`	`0.6`	Global opacity for the whole layer.	No
`backgroundOpacity`	`number`	`0`	Background radial fade opacity (0 = transparent background).	No
`speedMin`	`number`	`0.4`	Minimum per-dot speed in rad/s.	No
`speedMax`	`number`	`1.3`	Maximum per-dot speed in rad/s.	No
`speedScale`	`number`	`1`	Global speed multiplier for all dots.	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