Dot Background

A subtle radial-gradient dot pattern used as a page background. Creates visual texture without distracting from content.

Live Demo

Content floats above the dot grid

Basic Implementation

The dot background uses a CSS radial-gradient repeated across the element. Each dot is a 1px circle placed on a 24px grid.

css

.dot-background {
  background: radial-gradient(circle, #e5e5e5 1px, transparent 1px);
  background-size: 24px 24px;
}

Denser Grid Variant

css

.dot-background-dense {
  background: radial-gradient(circle, #d4d4d4 1px, transparent 1px);
  background-size: 16px 16px;
}

With Fade Overlay

Layer a radial white-to-transparent gradient on top to fade the dots toward the center, drawing focus to the main content area.

Dots fade toward center

tsx

<div style={{ position: "relative" }}>
  {/* Dot layer */}
  <div style={{
    position: "absolute",
    inset: 0,
    background: "radial-gradient(circle, #e5e5e5 1px, transparent 1px)",
    backgroundSize: "24px 24px",
  }} />
  {/* Fade overlay */}
  <div style={{
    position: "absolute",
    inset: 0,
    background: "radial-gradient(ellipse at center, rgba(255,255,255,0.9) 0%, transparent 70%)",
  }} />
  {/* Content */}
  <div style={{ position: "relative" }}>
    Your content here
  </div>
</div>

Usage Guidelines

Use as a full-page background behind content cards and sections.
Keep dot color subtle (use #e5e5e5 or lighter).
Pair with white card surfaces for contrast.
Use the fade overlay when content needs maximum readability.
Avoid combining with other busy background patterns.