Grid and Dot Backgrounds
CSS-based grid and dot pattern backgrounds with radial mask overlay.
Preview
Grid and Dot Backgrounds
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Default section backgrounds and documentation pages.
Why this component matters
Earn every pixel. A subtle grid implies structure and precision without adding visual noise.
Usage guidance
Use as a default background layer for content-heavy sections. Set opacity to 0.2 or lower. The radial mask should fade to black at edges.
Installation
bash
npx shadcn@latest add @aceternity/grid-and-dot-backgroundsUsage
example.tsxtsx
import { GridandDotBackgrounds } from "@/components/ui/grid-and-dot-backgrounds";
export default function Example() {
return (
<GridandDotBackgrounds>
{/* Your content here */}
</GridandDotBackgrounds>
);
}Source
grid-and-dot-backgrounds.tsx
components/ui/grid-and-dot-backgrounds.tsx