Random Multicolor Dot Pattern Generator

Generate portable CSS for a random multicolor dot pattern with an explicit color count and injected randomness.

Description

Generate 2–12 hex swatches and a CSS dot background with fixed pattern dimensions.

A radial gradient can draw a circular mark inside a repeating background tile. This generator combines a colored center with transparency over a solid background, using two palette entries.^[1]

The output colors array preserves every generated swatch, while css is the ready-to-copy background value. CSS background shorthand combines the image with other background settings.^[2]

Only the first two colors enter the pattern; requesting more colors extends the returned palette but does not make the CSS pattern use them. If the first two colors match, the pattern can appear solid.

When to use Random Multicolor Dot Pattern Generator

Use it for a CSS dot background starting point in a mockup or pattern-rendering fixture.

How to use Random Multicolor Dot Pattern Generator and understand its results

Enter integer count from 2 through 12 and run the generator.
Read colors and copy css as the value of the CSS background property on an element with visible dimensions.
Preview the element in a browser and check foreground contrast. Adjust dimensions or stops separately when the fixed pattern scale does not fit your design.

H = 360 × rH; S = 35 + 60 × rS; L = 25 + 55 × rL

Three independent draws per swatch sample HSL, then conversion rounds to 8-bit uppercase hex channels.

Only colors[0] and colors[1] enter the CSS: the first colors the radial center through 25%, transitioning to transparency at 26%, and the second supplies the background color. The shorthand sets position 0 0 and a 20px × 20px repeating tile. Percent stops describe the gradient rather than a fixed pixel diameter.

After generating count colors, the shared implementation consumes and validates one additional angle draw, although the dot/checkerboard CSS does not use its angle.

json

{
  "input": {
    "count": 3
  },
  "randomDraw": 0.25,
  "output": {
    "colors": [
      "#639431",
      "#639431",
      "#639431"
    ],
    "css": "radial-gradient(circle, #639431 0 25%, transparent 26%) 0 0 / 20px 20px #639431"
  }
}

Counts above two generate extra returned swatches but leave the CSS structure unchanged. Any invalid consumed draw, including the unused angle draw, fails; counts outside 2–12 are rejected.

The complete returned string includes position, size, and a background color or other shorthand components. Apply it to background; pasting the full string into background-image is invalid.

css

.sample {
  width: 240px;
  height: 120px;
  background: radial-gradient(circle, #639431 0 25%, transparent 26%) 0 0 / 20px 20px #639431;
}

Limitations and assumptions

The default source is Math.random; no seed input or cryptographic entropy guarantee is provided. Repeated runs may select the same result, and the distribution depends on the random source.

No distinctness, contrast, visual theme, color-vision suitability, or raster image is guaranteed. The tool does not render a preview or generate foreground styling. Returned dimensions are fixed rather than configurable inputs.

Alternative or Complementary methods

Use another pattern generator for a different CSS construction, or a palette generator when only swatches are needed. Check contrast after choosing the foreground and actual visible background colors.

References

CSS Images Module Level 4: Gradients — World Wide Web Consortium
CSS Backgrounds and Borders Module Level 3: Backgrounds — World Wide Web Consortium

Similar or alternative tools

Related CSS Pattern Generator
Generate a different fixed CSS pattern from random palette swatches.
Color Contrast Ratio
Check chosen foreground and background color pairs.