Dot Pattern Background

<div class="dot-pattern-bg">

  <div class="dot-pattern-content">
    <span>Dot Pattern</span>
    <h2>Simple Texture. Clean Visual Depth.</h2>
    <p>Reusable dotted background with pure CSS.</p>
  </div>

</div>

.dot-pattern-bg{
  position:relative;
  min-height:320px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  background-color:#050914;

  background-image:
    radial-gradient(
      circle,
      rgba(34,211,238,.35) 1.5px,
      transparent 1.5px
    );

  background-size:28px 28px;
}

.dot-pattern-bg::before{
  content:"";

  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at center,
      rgba(139,92,246,.18),
      transparent 55%
    );

  pointer-events:none;
}

.dot-pattern-content{
  position:relative;
  z-index:2;

  max-width:600px;
  padding:30px;

  text-align:center;
}

.dot-pattern-content span{
  display:inline-block;
  margin-bottom:12px;

  color:#22d3ee;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.dot-pattern-content h2{
  margin:0 0 12px;

  color:#ffffff;
  font-size:32px;
  line-height:1.2;
}

.dot-pattern-content p{
  margin:0;

  color:#c7d2e5;
  font-size:15px;
}

How This Dot Pattern Background Works

The Dot Pattern Background creates a dark section covered with evenly spaced cyan dots and a soft purple glow behind the central content. The component is built entirely with HTML and CSS. Its markup contains a .dot-pattern-bg wrapper and a .dot-pattern-content block with a small label, heading, and paragraph. The published component does not use JavaScript.

The main .dot-pattern-bg container starts with background-color: #050914, which provides the dark foundation. The dotted pattern is generated through a CSS radial-gradient() rather than individual HTML elements or a background image. This keeps the markup small while allowing the browser to repeat the same dot automatically across the section.

Inside background-image, the radial gradient uses a circular shape. The visible part of each dot is cyan rgba(34,211,238,.35) up to 1.5px, after which the gradient immediately becomes transparent. This produces a small semi-transparent cyan circle surrounded by empty space.

The spacing is controlled by background-size: 28px 28px. Each repeated background tile measures 28 pixels in both directions, so the 1.5-pixel dots form a consistent grid across the full container. Changing this value would affect the distance between dots without requiring any additional elements. For more information about the CSS function used to generate each dot, see the MDN radial-gradient documentation.

The component adds another visual layer with .dot-pattern-bg::before. This pseudo-element is absolutely positioned with inset: 0, causing it to cover the complete section. It contains another radial gradient, but this one is much larger and positioned at the center.

The central gradient begins with purple rgba(139,92,246,.18) and fades to transparent at 55%. This creates a broad glow behind the content while leaving the cyan dot grid visible around it. The purple layer is decorative and has pointer-events: none, so it cannot block links, buttons, or other interactive elements placed within the section.

The .dot-pattern-content block uses position: relative and z-index: 2, keeping the text above the dot pattern and purple glow. It is limited to 600px wide, has 30px of padding, and uses centered text alignment.

Typography follows the dark technology-style color palette used throughout the component. The small label is cyan #22d3ee, uses a 12px font size, 800 font weight, and 1.5px letter spacing, with text-transform: uppercase. The main heading is white at 32px with a 1.2 line height, while the paragraph uses 15px text in #c7d2e5.

The parent container has a minimum height of 320px and uses flexbox with align-items: center and justify-content: center. This keeps the content centered in both directions. overflow: hidden ensures the decorative layers remain visually contained within the section.

Customizing the Dot Pattern Background

The pattern can be adjusted through a small set of existing CSS values without changing its HTML structure.

• Replace #050914 with another base color to match a different dark theme.
• Change rgba(34,211,238,.35) to use another dot color or opacity.
• Adjust the 1.5px gradient stop to make the individual dots visually larger or smaller.
• Change background-size: 28px 28px to increase or decrease the spacing between repeated dots.
• Modify rgba(139,92,246,.18) to change the color or intensity of the central glow.
• Adjust the 55% transparent stop to control how widely the purple radial glow spreads.
• Change min-height: 320px if the dotted background needs to cover a taller or shorter section.
• Modify the 600px content width, 30px padding, or existing font sizes to fit the surrounding layout.

Where to Use This Dot Pattern Background

The regular dot grid works well when a page needs subtle texture without continuous animation or visually heavy decorative elements.

• Developer and technology website hero sections.
• SaaS landing-page headers and feature introductions.
• Developer portfolio sections with centered content.
• Call-to-action areas that need a subtle patterned backdrop.
• Software and API product pages.
• Dark-theme content sections that need more detail than a solid background.
• Documentation or coding-related page headers where a structured grid fits the design.

For a related CSS pattern based on angled shapes instead of evenly spaced dots, the Geometric Pattern Background is another CodeRipple option. The Dot Pattern Background remains especially simple because both its repeated texture and central glow are CSS-generated and completely static.

Frequently Asked Questions

Does the Dot Pattern Background require JavaScript?

No. The published component contains no JavaScript. The dots, central glow, content positioning, and typography are all created with CSS.

How are the dots created without separate HTML elements?

The main background uses a circular radial-gradient(). Cyan is visible up to 1.5px and becomes transparent immediately afterward. The browser then repeats this gradient using a 28px by 28px background size.

What creates the purple glow in the center?

The .dot-pattern-bg::before pseudo-element covers the container and uses a centered radial gradient. It starts with rgba(139,92,246,.18) and fades to transparent at 55%.

Is the Dot Pattern Background animated?

No. There are no CSS keyframe animations or JavaScript animation methods in the published component. Both the dot grid and central glow remain static.

The Dot Pattern Background combines a repeating radial-gradient pattern with a separate central glow, creating a structured CSS backdrop without additional graphics, animation, or JavaScript.