Animated Polka Dot Background

This is a background component that uses CSS’s radial-gradient to draw a lightweight and clean polka dot pattern. It doesn’t use any images, so it loads quickly and is fully customizable.

Use Cases & Features

• LP and hero section: As the background of the main visual, add a movement that is not too overpowering to give a modern impression.
• Background for cards and modals: Perfect as an accent when you’re tired of a simple, single-color background.
• Performance: Since it is completed only with CSS without loading images (SVG or PNG), it does not have a negative impact on LCP (Largest Contentful Paint).

Key points of design and UX (Design & UX)

• Subtle animation: Use transform to slowly move diagonally to bring depth and rhythm to a static page.
• Vignette effect: The pattern is clearly visible in the center, and an overlay (radial-gradient) that blends into the background color towards the edges increases the visibility of text and content placed above.
• Dark mode compatible: Designed to seamlessly switch the background color and dot color by utilizing the :global(.dark) class and media queries.

How to customize (Customization Guide)

You can easily adjust the size and spacing of the dots by simply changing CSS variables.

• --dot-size: dot radius (e.g. 2px will make it larger)
• --dot-space: Space between dots (e.g. 32px reduces density)
• --dot-color-light / --dot-color-dark: Change the dot color. We recommend choosing a light color that matches your theme color.

Implementation code (Implementation)

export const PolkaDotBackground: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
return (
  <div className="polka-container relative w-full min-h-[400px] flex items-center justify-center overflow-hidden bg-slate-50 dark:bg-slate-950">
    {/* Polka Dot Pattern */}
    <div className="polka-dots absolute inset-0"></div>
    
    {/* Vignette Overlay */}
    <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(248,250,252,0.85)_100%)] dark:bg-[radial-gradient(circle_at_center,transparent_0%,rgba(2,6,23,0.85)_100%)]"></div>
    
    {/* Content */}
    <div className="relative z-10">
      {children}
    </div>
  </div>
);
};

Browser Support

Fully supported on all modern browsers (Chrome, Firefox, Safari, Edge). Since it is animated using GPU-accelerated transform, it works very smoothly even when scrolling or performing other heavy processing.