Dotted Glow Background
A background effect with opacity animation, glow effect and more.
Installation
Run the following command
npx shadcn@latest add @aceternity/dotted-glow-background
Example Background
Props
DottedGlowBackground Props
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 |
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
70+ templates and component blocks combined
Ready to copy paste component blocks, save days of development time

