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.