Dot Grid Pattern

Quick implementation

.dot-grid {
  background-color: oklch(0.19 0.02 260);
  background-image: radial-gradient(
    circle,
    oklch(0.72 0.19 265 / 0.4) 1px,
    transparent 1px
  );
  background-size: 1.5rem 1.5rem;
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer. Your task is to create a reusable dot grid pattern background component.

Role & Goal:
Build a flexible CSS dot grid background that can be applied to any container. The grid should use a radial-gradient to create evenly-spaced dots with adjustable size, spacing, and color.

Technical Constraints:
1. Use radial-gradient with a single color stop (circle shape)
2. Leverage background-size for spacing control
3. Support opacity/transparency in the dot color using oklch()
4. Avoid any pseudo-elements or extra markup

Vanilla CSS implementation:
.dot-grid {
  background-image: radial-gradient(circle, oklch(0.72 0.19 265 / 0.4) 1px, transparent 1px);
  background-size: 1.5rem 1.5rem;
}

React/TypeScript variant:
Create a DotGrid component accepting size, spacing, and color props, returning a div with computed background styles.

Edge cases to handle:
1. Very small containers where dots don't fit perfectly
2. Different dot sizes (0.5px to 3px) and spacings (1rem to 3rem)
3. Responsive grid that scales with viewport
4. High-DPI displays where 1px may render too small
5. Performance with large elements (use contain: layout for optimization)

Why this matters in 2026

Dot grids are everywhere in modern design — from subtle backgrounds to primary UI patterns. Rather than loading image assets or SVG filters, CSS radial-gradient delivers pixel-perfect dot patterns with zero external dependencies and instant responsiveness.

This technique is particularly valuable for design tools, dashboards, and minimalist interfaces where pattern density needs to adapt to container size and responsive breakpoints.

The logic

radial-gradient(circle, color 1px, transparent 1px) creates a single filled circle with a hard stop at the edge. By pairing this with background-size, the gradient repeats to form a grid. The dot size is controlled by the color stop (1px), and spacing is controlled by background-size (1.5rem in the example).

The key insight: adjust background-size: Xrem Yrem to change spacing, and modify the first color stop pixel value to change dot size. Using oklch(.../ opacity) lets you layer the pattern over any background without repainting.

Accessibility & performance

Dot grids are pure CSS and have zero performance impact — they render as a single background image computed by the browser. No JavaScript, no animation overhead. For users who prefer reduced motion, the static pattern is unaffected. If you animate the background-position (parallax effect), always pair it with @media (prefers-reduced-motion: reduce) to disable the animation.