CSS Background Pattern Generator

Free tool No sign-up

Pattern

Colors

Background

Pattern

Opacity100%

Geometry

Tile size24px

Thickness40%

Rotation0°

Presets

Try this to preview behind a real card

Generated CSS

.pattern {
  background-color: #0f1419;
  background-image: radial-gradient(circle, rgba(167,139,250,1) 2.728px, transparent 3.228px);
  background-size: 24px 24px;
}

About this generator

Build production-ready CSS background patterns visually — 12 motifs (dots, diagonal stripes, vertical stripes, grid, checkerboard, cross-hatch, triangles, zig-zag, hexagons, topographic, plus signs, diamonds), all rendered with pure background-image gradients. No SVG, no PNG, no external requests. Switch on the in-context preview to see how the pattern reads behind a real card before you copy.

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.