The generator's pattern dropdown lists eight options: none, stars, dots, grid, noise, carbon fibre, bokeh and stripes. They are not interchangeable. Each pattern has a strong visual personality; pick the wrong one and it will compete with your headline, your photo or your UI instead of supporting it.
This guide gives one decision criterion per pattern, then a checklist for matching density to your foreground.
The decision in one sentence
If something else on the page already does the talking — a hero image, a logo, body text — pick the pattern that is least visible at low density: noise first, then none. Reach for a stronger pattern only when the background is the image.
Pattern by pattern
None — the default
A flat dark colour with optional vignette and grain. Use this when the foreground is busy, when accessibility and contrast matter most, or when the background will sit behind body text. "None" is also the right pick for placeholders and empty states; it is impossible to make wrong.
Stars — set dressing for hero sections
Tiny scattered points of light. Reads as cosmic, atmospheric, premium-tech. Works well behind a single bright element (a product render, a logo) where the eye needs context but not detail. It does not work behind paragraphs of text — the high-contrast specks distract from reading. Keep density low (under 25%) unless you specifically want a dense Milky-Way look.
Dots — pattern, not personality
A regular dot grid. The most "neutral" of the structured patterns. Reads as graph paper, design system, technical reference. Works under UI mock-ups and as a containing texture for icons or tiles. Tends to look dated above ~40% density; keep dots small and sparse.
Grid — wireframe energy
Straight lines crossing at regular intervals. Strong horizontal/vertical structure that aligns the foreground rather than competing with it — useful behind dashboards, schematics, blueprints, sci-fi UI and presentation slides. Avoid behind body text: the lines bleed into the lines of type.
Noise — the safe upgrade from "none"
Fine random luminance variation. Hides the colour banding that can show up in pure flat dark fills, especially on 8-bit displays and in JPEG/H.264 compression. The default upgrade when "none" feels too clean. At low density (5–15%) it is invisible up close and only legible as "this looks rendered, not generated". Safe under text.
Carbon fibre — material, not background
A repeating woven texture mimicking carbon-fibre composite. Strong material connotation: automotive, performance, luxury hardware. It almost never sits behind text well; treat it as a small inset (a card, a hero strip) rather than a full-page wash.
Bokeh — soft, painterly, romantic
Out-of-focus light blobs. Visually expensive: it looks like a real photograph. Excellent behind a single short headline or for landing pages where the mood matters more than the message. Bokeh fights any other strong colour; pair it with white or a single accent only.
Stripes — graphic posters and labels
Diagonal or straight bands. The most assertive pattern of the eight. Reads as editorial, sport, retail. Works in tight inserts (a CTA strip, a footer band) and in posters. It is overkill behind anything subtle.
Matching density to the foreground
Density is not a "more is better" knob. The right number depends on what sits on top:
- Body text: 0–10% on noise; 0% on every other pattern.
- Single short headline (one line, large): up to 30% on stars/dots/noise; up to 50% on grid; bokeh and carbon fibre are fine because the headline lives in negative space.
- Hero image or logo: 30–60% — strong enough to read as intentional texture, low enough that the foreground still wins.
- Standalone wallpaper or backdrop (no foreground): 60–100% — let the pattern be the picture.
Common mistakes
- Picking a pattern before knowing the foreground. The pattern is a backdrop, not the lead actor. Decide what the foreground is first.
- Using carbon fibre or stripes behind text. Both create high local contrast that fights every glyph.
- Cranking density to make a "premium" look. Premium reads as restraint. The most expensive-looking variants in the matrix are usually the ones with density under 25%.
- Forgetting the export size. A pattern that reads as fine grain at 1080p can read as coarse blobs at mobile sizes. See the export resolution guide before you commit.
- Pairing strong pattern with strong vignette. Both pull the eye to the centre. Pick one; let the other rest near zero — see vignette for the full picture.
Quick map: foreground type → first-choice pattern
- Long article body → none (or noise at very low density).
- UI mock-up, dashboard, schematic → grid.
- Product render, gadget photo → stars or low-density dots.
- Marketing landing page with one big headline → bokeh.
- Tight CTA strip, footer band → stripes.
- Hardware/automotive card or hero strip → carbon fibre.
- Slide deck used in a meeting → noise or none; nothing more.
- Phone or desktop wallpaper → anything; this is the case where density can run high.
What to do next
Open the generator and start with "none" plus the colour you want. Click 🎲 Randomize a few times to feel the spread. Switch to one pattern at a time at low density and only raise density once the colour feels right. When you are done, decide on size in the export resolution guide and, if you are putting this on a real site, read about black backgrounds in web design for contrast and accessibility caveats.
Reviewing the colour itself? See pure black vs near-black for why #0a0a0a often outperforms #000 behind text. If the destination is a stream or call rather than a static image, the video and streams guide covers which patterns survive aggressive compression. For wallpapers specifically, see wallpapers.
Last reviewed on 28 April 2026.
← Back to generator