Radial-mask dot pattern background
SVG dot grid with a radial fade mask, subtle enough to sit behind body copy or a pricing table. The glow prop adds a mouse-follow highlight if you want more motion. Safe default background for any vertical.
Live preview
open in new tab ↗"use client"
import { cn } from "@/lib/utils"
import { DotPattern } from "@/components/magicui/dot-pattern"
export function DotPatternDemo() {
return (
<div className="bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border">
<DotPattern
className={cn(
"[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]"
)}
/>
</div>
)
}Block id: magicui-dot-patternreact-tailwind · drop-in
More background blocks
Want the whole site, not just the block?
We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.