CSS Background Pattern Generator (No SVG, No Image)

Dots

Advertisement

PatternDots
Tile24px
Density40%
Opacity100%

About this generator

12 pure-CSS repeating patterns — dots, diagonal stripes, vertical stripes, grid, checkerboard, cross-hatch, triangles, zigzag, hexagons, topographic contours, plus signs, diamonds. Every pattern is built from linear-gradient / radial-gradient / repeating-linear-gradient stacked into background layers. No SVG. No PNG. No image requests. Renders at any size on any device.

10 curated presets covering common use cases (paper, blueprint, denim, noir, sunshine, editorial, hex-tech) with bg + fg + size + density + opacity dialed in. Tune any preset further with sliders, then export as either plain CSS or themeable (CSS-variable) form for easy dark-mode / brand-swap overrides.

Permalink: every adjustment encodes into the URL. No login, no watermark, no paywall. Free and MIT-licensed.

Why CSS patterns?

🎨

Pure CSS — no images, no SVG

Every pattern here is built from `background-image` gradients. No PNGs to download, no SVGs to inline, no requests. The whole pattern lives in 2–4 lines of CSS that gzip to almost nothing.

⚡

Resolution-free + retina-perfect

Vector by definition — gradient patterns scale infinitely without blurring. No `@2x` variants. No worrying about how it looks on a 5K display vs a phone.

🌈

Re-skin in one variable

Swap the two color stops via CSS custom properties to retheme an entire pattern. Dark-mode the same pattern with a `prefers-color-scheme` media query — no asset duplication.

🧩

Compose on top of real content

Patterns layer cleanly under cards, hero text, and forms. Toggle the in-context preview to see how your pattern reads behind real UI before you ship it.

▶

How to use this generator

Pick a pattern shape

Dots and grids feel structured; stripes and zig-zag feel energetic; topographic and hexagons feel technical. Hover a chip to see what each pattern uses.

Set two colors

Background color is the canvas. Pattern color is the motif drawn over it. Use a soft tone with low opacity for subtle texture, or two contrasting colors for bold backdrops.

Tune tile size + density

Tile size sets how often the pattern repeats (smaller = denser, larger = airier). Density sets the THICKNESS of the motif within each tile. Drop opacity to 8–15% for backgrounds; raise it to 50–100% for decorative panels.

Preview in context

Click "In context" to render a sample card on top of your pattern. Real UI almost always sits over a pattern — if it doesn't read at this scale, lower the opacity or pick a quieter motif.

Copy the CSS

One click copies the full `.pattern { … }` block. Paste it onto any element — `body`, a `<section>`, a hero wrapper. The CSS is self-contained; you don't need any other rules.

⇄

Pattern reference

Pattern	Technique	Best for
`Dots`	`radial-gradient` + `background-size`	Soft backgrounds, polka motifs
`Diagonal stripes`	`repeating-linear-gradient(45deg, …)`	Construction-zone, denim, sport panels
`Vertical stripes`	`repeating-linear-gradient(90deg, …)`	Editorial layouts, ticket stubs
`Grid`	Two `linear-gradient`s + `background-size`	Designer / engineering tools, graph paper
`Checkerboard`	Four diagonal `linear-gradient`s tiled together	Transparency indicators, retro tile floors
`Cross-hatch`	Two opposing `repeating-linear-gradient`s	Editorial illustrations, sketch feel
`Triangles`	Two `linear-gradient`s at 60° with offset tiles	Modern, geometric, decorative
`Zig-zag`	Four `linear-gradient`s at mirrored angles	Playful, energetic, brand panels
`Hexagons`	Three `repeating-linear-gradient`s at 60° / 0° / -60°	Tech, sci-fi, gaming UIs
`Topographic`	Stacked `radial-gradient` contour rings	Outdoor, mapping, hiking products
`Plus signs`	Two `linear-gradient`s offset by half-tile	Healthcare, math, minimal motifs
`Diamonds`	Two diagonal `linear-gradient`s offset to interlock	Argyle, classic textile motifs

Common patterns

Minimal

.hero {
  background-color: #0f1419;
  background-image:
    radial-gradient(circle, rgba(167,139,250,0.35) 2px, transparent 2.5px);
  background-size: 24px 24px;
}

Themeable

:root {
  --pattern-bg: #fafafa;
  --pattern-fg: rgba(10, 10, 14, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --pattern-bg: #0f1419;
    --pattern-fg: rgba(167, 139, 250, 0.18);
  }
}

.surface {
  background-color: var(--pattern-bg);
  background-image:
    linear-gradient(var(--pattern-fg) 1px, transparent 1px),
    linear-gradient(90deg, var(--pattern-fg) 1px, transparent 1px);
  background-size: 28px 28px;
}

Animated

.banner {
  background-color: #0d3a6b;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.12) 0, rgba(255,255,255,0.12) 6px, transparent 6px, transparent 18px);
  animation: drift 30s linear infinite;
}
@keyframes drift {
  to { background-position: 200px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .banner { animation: none; }
}

✦

Pro tips

Keep background patterns under 15% opacity

If text needs to sit on the pattern, the pattern shouldn't compete. 5–15% opacity reads as texture; over 25% starts to interfere with body copy.

Use `background-attachment: fixed` for hero sections

Pin the pattern to the viewport so it parallax-stays as the user scrolls past a hero. One extra line, distinctive feel. Drop it for normal sections — the parallax effect gets nauseating if used everywhere.

Layer multiple patterns for depth

Both `background-image` and `background-color` accept multiple comma-separated values. Stack a soft dot grid over a faint diagonal stripe for visual depth without extra elements.

Match your border-radius

A pattern on a `border-radius: 16px` card needs `overflow: hidden` on the parent (or the same radius applied to the patterned element). Otherwise the pattern bleeds past the rounded corners on Safari.

Animate with `background-position`

For an ambient drift effect, animate `background-position` over 30–60s with `linear` timing. The pattern feels alive without being distracting. Wrap in `@media (prefers-reduced-motion: no-preference)` to respect accessibility.