Dot Background
A highly customizable dotted background component with a built-in radial mask. Perfect for creating depth and modern aesthetics in sections, hero areas, or cards without using heavy image assets.
Live Interactive Preview
Premium Dotted Grid
Source
npx futureuikit add dot-background Details
Pure CSS-based dotted grid using radial gradients.Built-in radial mask for smooth blending with the page background.Fully customizable dot size, gap (spacing), and color.Adjustable mask opacity to control the intensity of the effect.Works as a wrapper or a standalone background layer.Lightweight and performant with zero image dependencies.
How to Use?
- Import DotBackground into your React component.
- Use it as a wrapper around your content or as a separate layer.
- Adjust the dotSize and gap to fit your design's scale.
- Change the dotColor to match your brand (defaults to 'currentColor').
- Tweak the maskOpacity to control how much the grid fades towards the edges.