The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="dots">
  <div class="card">
    <h1>Dot Matrix</h1>
    <p>One radial gradient, repeated.</p>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same background, then ask it to adapt the colours, text or framework to your project.

Create a light dotted background pattern with pure CSS.

Requirements:
- Full-viewport container with background-color #f7f7f7.
- Draw the dots using one radial-gradient as background-image: a 1.5px dot in #c7cbe0, transparent outside it.
- Repeat it with background-size: 22px 22px.
- Centre a white card (1px #e8e9f0 border, 16px radius, soft shadow) containing a navy (#002057) heading and grey subtitle.
- No images or JavaScript.

Return one HTML file with CSS in a <style> tag.

How to build it, step by step

1. 1

   Set a solid background-color first; the dots are painted on top of it.

2. 2

   Add background-image: radial-gradient(colour 1.5px, transparent 1.5px). The hard stop at 1.5px draws a crisp dot.

3. 3

   Set background-size to the spacing you want (22px here). The browser repeats the gradient automatically, creating the pattern.

4. 4

   Centre your content with display: grid and place-items: center.

Customisation tips

• Increase the dot radius to 2px and the spacing to 28px for a bolder pattern.
• Use background-position: 11px 11px on a second layer to create an offset (staggered) dot grid.
• For dark mode use background #0b1020 with dots in rgba(255,255,255,0.15).

More backgrounds