CSS Dots Background Guide for Web Design

A flat white or gray background is clean, but it can also feel empty. A CSS dots background adds texture, depth and visual interest without the weight of image files - no images, no external dependencies, no HTTP requests, just a few lines of CSS.

This guide starts with how to build a CSS dots background from scratch (including the offset polka-dot variant), then covers grid, diagonal line and checkerboard patterns, SVG pattern basics, the best use cases, performance tips, and how to use the Background Pattern Generator to create and copy any of these patterns instantly.

How to create a CSS dots background

A CSS dots background works by combining a small radial-gradient with background-size. The gradient draws one dot, and the browser tiles it across the element at whatever spacing you set - no image file required.

background-color: #ffffff;
background-image: radial-gradient(rgba(99,102,241,0.5) 1.5px, transparent 1.5px);
background-size: 24px 24px;

Three properties control the look of the dots:

• Dot size: the radius value in the gradient (1.5px above). Larger values make bigger, bolder dots.
• Dot spacing: the background-size value. A larger tile (for example 40px 40px) spreads the dots further apart.
• Dot color and opacity: the rgba() color. Lower the alpha value (the fourth number) for a more subtle, low-contrast dots background.

Offset (polka-dot) CSS dots background

A straight grid of dots is one option, but many designs call for the classic staggered polka-dot look, where every other row is offset by half a tile. You get this by layering two identical dot gradients and shifting the second one with background-position:

background-color: #ffffff;
background-image:
  radial-gradient(rgba(99,102,241,0.5) 1.5px, transparent 1.5px),
  radial-gradient(rgba(99,102,241,0.5) 1.5px, transparent 1.5px);
background-size: 24px 24px;
background-position: 0 0, 12px 12px;

The second background-position value (12px 12px) is exactly half the background-size tile (24px), which is what staggers the rows. Change both together to resize the whole pattern while keeping the offset correct.

Prefer not to write the gradient math by hand? The Background Pattern Generator has a Dots preset with size, spacing, color and opacity sliders that outputs this exact CSS - copy it straight into your stylesheet.

A subtle dots background is the difference between a page that breathes and one that just sits there.

Other CSS gradient patterns: grid, lines and checkerboard

The same background-image and background-size technique used for a CSS dots background extends to several other common patterns.

Grid pattern

background-color: #ffffff;
background-image:
  linear-gradient(rgba(99,102,241,0.3) 1px, transparent 1px),
  linear-gradient(90deg, rgba(99,102,241,0.3) 1px, transparent 1px);
background-size: 24px 24px;

Diagonal lines pattern

background-color: #ffffff;
background-image: repeating-linear-gradient(
  45deg,
  rgba(99,102,241,0.3),
  rgba(99,102,241,0.3) 1px,
  transparent 1px,
  transparent 24px
);

Checkerboard pattern

background-color: #ffffff;
background-image: conic-gradient(rgba(99,102,241,0.3) 25%, transparent 25%, transparent 75%, rgba(99,102,241,0.3) 75%);
background-size: 48px 48px;

SVG pattern basics

For patterns that are difficult to achieve with CSS gradients alone (complex shapes, triangles, custom icons), SVG patterns are the next step. An SVG pattern tile is defined in a <defs> block and referenced with a fill orbackground-image.

The Background Pattern Generator also provides a downloadable SVG tile for each pattern, including dots, which you can use as a CSS background image or inline in your HTML.

Best use cases for a CSS dots background

• Hero sections: a subtle dots background behind a headline adds texture without competing with the text.
• Feature sections: alternate between a plain background and a dots background to create visual rhythm.
• Cards and panels: a light dots background differentiates a card from the page background.
• Full-page backgrounds: a very subtle dots background (5-10% opacity) adds depth to otherwise flat pages.
• Email templates: CSS dot patterns work in most modern email clients and add visual interest without image attachments.

Performance tips

• Keep opacity low: dots at 10-30% opacity are subtle and professional. High-opacity patterns compete with content.
• Use CSS over images: a CSS dots background has zero file size and renders instantly. Image patterns add HTTP requests and fixed resolutions.
• Avoid complex patterns on mobile: very dense CSS patterns can cause rendering performance issues on low-end devices. Test on mobile before shipping.
• Combine with a solid background color: always set a background-color alongside the pattern. This ensures the page looks correct while the CSS loads and provides a fallback.

How to use the Background Pattern Generator

1. Open the Background Pattern Generator.
2. Choose a pattern type: Dots, Grid, Diagonal lines, Checkerboard, Triangles or Waves.
3. Set your background color and pattern color.
4. Adjust the size slider to control the spacing between dots or other elements.
5. Adjust the opacity slider to control how prominent the pattern is.
6. Click Copy CSS to copy the pattern code, or Download SVG tile to save the SVG file.
7. Paste the CSS into your stylesheet. The pattern will tile automatically.

Frequently Asked Questions

How do I create a CSS dots background?

Set a background-color, then add a radial-gradient as the background-image with a small radius (1-2px), and set background-size to the spacing you want between dots (for example 24px 24px). The browser tiles the gradient automatically.

How do I make a polka dot (offset) background in CSS?

Use two identical radial-gradient layers in background-image, then shift the second layer by half the tile size using background-position (for example 0 0, 12px 12px for a 24px tile). This staggers alternating rows into the classic polka-dot look.

Are CSS patterns better than image patterns?

For simple patterns like dots, grids and lines, CSS is almost always better. CSS patterns are resolution-independent, load instantly and can be changed with a single line of code.

Do CSS background patterns work in all browsers?

Yes. CSS gradients and background-size have been supported in all major browsers since 2012.

Can I use CSS patterns on dark backgrounds?

Yes. Simply set a dark background color and a lighter pattern color. The opacity control lets you fine-tune the contrast.

Will background patterns slow down my website?

Simple CSS patterns are generated by the browser and have no file size. They are among the lightest visual effects you can add to a page.

Is the Background Pattern Generator free?

Yes. The Sounez Background Pattern Generator is free to use and does not require an account.

Conclusion: a dots background without the weight

A CSS dots background is one of the most cost-effective design improvements you can make. It adds texture and depth with zero file size and instant rendering. Open the Background Pattern Generator, pick the Dots preset, set your brand color at 15-20% opacity, and copy the CSS. Pair it with a gradient from the CSS Gradient Generator for a complete background design system. For more design tools, read free design tools for web creators.