backgrounds

DotGrid

Animated dot matrix background using pure CSS radial-gradient patterns with optional drift animation and radial fade mask.

v1.0.0react >=18next >=14tailwind >=4

backgrounddotspatterngriddecorative

Preview

Loading preview...

Props

Prop	Type	Default	Description
`dotSize`	`number`	`1`	Dot radius in pixels
`gap`	`number`	`24`	Space between dots in pixels
`color`	`string`	`rgba(255,255,255,0.15)`	Dot color (any CSS color value)
`animate`	`boolean`	`true`	Enable subtle drift animation
`fade`	`boolean`	`true`	Apply radial fade mask (vignette effect)
`className`	`string`	`—`	Additional Tailwind classes
`id`	`string`	`—`	HTML id attribute

Layout

Display: block

Responsive: No

Fills container with absolute positioning. Requires a relative-positioned parent.

Examples

Basic usage

<div className="relative h-96 bg-black">
  <DotGrid />
  <div className="relative z-10 p-8">
    <h1>Content above dots</h1>
  </div>
</div>

Dense grid without fade

<div className="relative h-96 bg-neutral-950">
  <DotGrid gap={16} dotSize={1.5} fade={false} />
</div>

Custom color, no animation

<div className="relative h-96 bg-neutral-900">
  <DotGrid color="rgba(139,92,246,0.2)" animate={false} />
</div>

AI Usage Hint

Use DotGrid as a subtle background pattern. Place behind hero sections or feature grids. Enable fade for a vignette effect. Adjust gap and dotSize for density. Layer with other content using absolute positioning.

Works Well With

AuroraGradientMesh