What is the difference between grid and offset?

In a grid the dots sit in straight rows and columns. Offset shifts every other row by half a step, which looks denser and more classic.

How do I keep scattered dots from overlapping?

With the scatter layout the dots keep a minimum distance based on the spacing. Add size variation for extra variety.

Can I use the pattern as a CSS background?

Yes. The CSS export embeds the pattern as SVG, so you can use it directly as a background-image.

Which shapes are available?

Circles, rings and squares. Rings feel lighter and work well for bright, airy backgrounds.

Polka Dots

Dot patterns on a grid, offset or freely scattered. Export as SVG or image.

Open the generator

Runs right in your browser. Your graphics are made on your device.

Start from a preset

Pick a preset and it opens right in the editor, ready to adjust.

What is it?

Polka dots are dot patterns, evenly spaced or freely scattered. Depending on size and color they look playful or calm, and they suit backgrounds for websites, packaging, cards and fabrics. Besides circles you can use rings and squares.

How it works

Pick a layout (grid, offset or scatter), set spacing and dot size, and choose whether dots share one color, alternate or get random colors. Press Space for new variations. Export as SVG, CSS or image.

Try the Polka Dots now

FAQ

What is the difference between grid and offset?: In a grid the dots sit in straight rows and columns. Offset shifts every other row by half a step, which looks denser and more classic.
How do I keep scattered dots from overlapping?: With the scatter layout the dots keep a minimum distance based on the spacing. Add size variation for extra variety.
Can I use the pattern as a CSS background?: Yes. The CSS export embeds the pattern as SVG, so you can use it directly as a background-image.
Which shapes are available?: Circles, rings and squares. Rings feel lighter and work well for bright, airy backgrounds.

All generators in Patterns

Seamless Patterns
Seamlessly tiling patterns made of shapes or your own graphic. Export as SVG, CSS, tile or image.
Open in editor
Grid Patterns
Grid lines, dot grids, crosses or tiles with major and minor grids. Export as SVG or image.
Open in editor
Confetti
Confetti made of strips, circles, triangles and squiggles, evenly spread. Export as SVG or image.
Open in editor
Dieter Dots
Concentric rings of dots, like a perforated speaker grille. Export as SVG or image.
Open in editor
CSS Patterns
Over 30 pure CSS patterns: dots, grids, stripes, waves and geometric shapes. Export as CSS, Tailwind, SVG or image.
Open in editor
Doodle Backgrounds
Hand-drawn looking squiggles, spirals, stars and zigzags as a background. Export as SVG or image.
Open in editor

Start from a preset

What is it?

How it works

FAQ

Related generators

Seamless Patterns

Grid Patterns

Confetti

Dieter Dots

CSS Patterns

Doodle Backgrounds