All Tools
Design
CSS Polka Dot Pattern Generator

CSS Polka Dot Pattern Generator

Generate a polka dot background pattern with CSS.

Base color (#06c0cc)

Dot color (#e8f9fa)

Size (43%)

Spacing (18%)

Blur (1.5)

Type

Pattern 1Pattern 2

background-color: #06c0cc;
background-image: radial-gradient(#e8f9fa 24%, transparent 25.5%), radial-gradient(#e8f9fa 24%, transparent 25.5%);
background-position: 0 0, 26px 26px;
background-size: 52px 52px

Explanation

Generates CSS in real time from background/dot colors and dot size/spacing/blur.

Settings

Base color	Sets the base background color.
Dot color	Sets the dot color.
Size	Sets the dot size.
Spacing	Sets the spacing between dots.
Blur	Sets the dot blur. A small value can reduce jaggies.
Type	Choose between two dot layout patterns.

Related Tools

CSS Checkered

Generate a checkered background pattern with CSS.

CSS Stripe

Generate a stripe background pattern with CSS.

CSS Gradient

Generate CSS for linear and radial gradients.

CSS Shadow

Generate CSS for box shadows (outer/inner) with adjustable parameters.

Dummy Image

Generate placeholder images for mocks and wireframes.Set image size, background/text colors, and text, and get a direct-link image URL.

JSON Check

Validate JSON (and optionally JSONP) and check for syntax errors.

CodeJSONValidation

Dummy Text

Generate placeholder text for design and wireframes.Supports presets or custom text and outputs a specified character count.

HTML Entities

Encode and decode HTML entities (e.g. & ↔ &).

EncodingHTMLCode

Design CSS Code