How do I install Background Dots Masked?

Run npx shadcn@latest add @aceternity/background-dots-masked in your terminal. Before installing, add the Aceternity Pro registry to your components.json and set your API token as the ACETERNITY_PRO_TOKEN environment variable. The CLI automatically installs all required dependencies including Tailwind CSS plugins and Framer Motion.

Is Background Dots Masked responsive and accessible?

Yes. The component is fully responsive across mobile, tablet, and desktop breakpoints. It uses semantic HTML elements, proper heading hierarchy, and accessible color contrast ratios. Touch targets are appropriately sized for mobile interactions, and all interactive elements are keyboard-navigable.

Can I customize the colors, fonts, and layout?

Everything is built with Tailwind CSS utility classes and Framer Motion animations. You can change colors, spacing, typography, border radius, shadows, and animation timing directly in the JSX — no separate CSS files to manage. The component uses your project's Tailwind theme, so it automatically adapts to your design system.

What frameworks does this work with?

Background Dots Masked is built for React and Next.js (App Router and Pages Router). It requires Tailwind CSS v4 and Framer Motion. It works with any React-based framework including Remix, Gatsby, and Vite — just ensure Tailwind CSS and Framer Motion are configured in your project.

Backgrounds

4 / 11

Background Dots Masked

A dotted pattern with a radial CSS mask that fades the pattern from center to edges. Creates a spotlight effect that draws attention to centered content.

Web apps that make you feel like you're in the future

We are a team of developers who are passionate about creating web apps that make you feel like you're in the future.

The radial gradient mask starts fully opaque at the center and fades to transparent at the edges. This CSS-only technique requires no JavaScript and works with any repeating pattern. The dots appear at 30% opacity with 8px spacing between them.

Dark mode automatically inverts the dot color from black to white using Tailwind's dark mode classes. The mask-image property has good browser support in modern browsers, with graceful degradation in older ones.

Good choice for product landing pages, startup homepages, newsletter signup sections, and any centered hero layout where you want to guide the eye inward.

More from Backgrounds

Included with All-Access

One payment unlocks the code for this block and every other block, template and page.

Get All-Access

Explore more

Background Dots Background Dots Masked Vertical Background With Shooting Stars Backgrounds Hero Sections

About this block

Good choice for product landing pages, startup homepages, newsletter signup sections, and any centered hero layout where you want to guide the eye inward.