backgrounds

GridPattern

Animated grid lines background using SVG patterns with optional radial fade mask and subtle pulse animation.

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

backgroundgridlinessvgpatterndecorativeanimated

Preview

Loading preview...

Props

Prop	Type	Default	Description
`size`	`number`	`32`	Grid cell size in pixels
`strokeColor`	`string`	`rgba(255,255,255,0.08)`	Line color (any CSS color value)
`strokeWidth`	`number`	`1`	Line width in pixels
`fade`	`boolean`	`true`	Apply radial fade mask (vignette effect)
`animate`	`boolean`	`true`	Enable subtle pulse animation on stroke opacity
`className`	`string`	`—`	Additional Tailwind classes
`id`	`string`	`—`	HTML id attribute

Layout

Display: block

Responsive: No

Fills container with absolute positioning. SVG pattern tiles cleanly at any size. Requires a relative-positioned parent.

Examples

Basic grid

<div className="relative h-96 bg-black">
  <GridPattern />
  <div className="relative z-10 p-8">
    <h2 className="text-white text-2xl">Pricing</h2>
  </div>
</div>

Large cells, no fade

<div className="relative h-96 bg-neutral-950">
  <GridPattern size={64} fade={false} strokeColor="rgba(255,255,255,0.05)" />
</div>

Colored grid, no animation

<div className="relative h-96 bg-neutral-900">
  <GridPattern strokeColor="rgba(139,92,246,0.15)" animate={false} size={48} />
</div>

AI Usage Hint

Use GridPattern for a clean, technical grid background. Adjust size for cell dimensions. Enable fade for a vignette effect. Works well behind pricing sections, dashboards, or code showcases.

Works Well With

DotGridGradientMesh