Random Multicolor Stripe Pattern Generator

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

Description

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

A repeating linear gradient repeats a sequence of color stops along a direction. This generator builds stripes from generated hex swatches, with each stripe spanning a fixed interval along the gradient line.^[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]

All returned colors enter the stripe sequence. The generator does not enforce distinct colors, so adjacent stripes can merge visually.

When to use Random Multicolor Stripe Pattern Generator

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

How to use Random Multicolor Stripe 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.

Every generated color occupies a 12-pixel interval: color i runs from 12i px through 12(i+1) px. A final draw sets angle = floor(360 × randomDraw) degrees. The repeating-linear-gradient period is 12 × count pixels.

After generating count colors, the implementation validates the additional angle draw and emits the repeating gradient.

json

{
  "input": {
    "count": 3
  },
  "randomDraw": 0.25,
  "output": {
    "colors": [
      "#639431",
      "#639431",
      "#639431"
    ],
    "css": "repeating-linear-gradient(90deg, #639431 0px 12px, #639431 12px 24px, #639431 24px 36px)"
  }
}

Changing count changes the repeat period and the number of stops. The angle lies from 0 through 359 degrees; invalid draws and counts outside 2–12 fail.

The returned value is a gradient image and can also be used as background-image.

css

.sample {
  width: 240px;
  height: 120px;
  background: repeating-linear-gradient(90deg, #639431 0px 12px, #639431 12px 24px, #639431 24px 36px);
}

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.