CSS Background Pattern Generator

Free toolNo sign-up

Dots

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.

Frequently asked questions

Why CSS gradients instead of SVG or PNG patterns?

Three reasons. (1) Zero asset weight — the pattern ships as CSS, no extra image request, no DPI banding, no Retina downsizing. (2) Themeable — wrap the colors in CSS custom properties and dark mode / brand recolor becomes a one-line override (the generator's 'Themeable' output does this for you). (3) Infinitely scalable — the pattern renders at the element's full resolution, no matter how large. Trade-off: complex pixel-art patterns are easier in SVG; CSS gradients shine for geometric repeats.

How does the 'themeable' output work?

Standard mode embeds the bg + fg colors as literal hex values inside the gradient rule. Themeable mode lifts those colors into :root CSS custom properties (--pattern-bg, --pattern-fg) and references them via var() inside the pattern rule. To re-theme — for dark mode, brand swap, A/B test — just override the two custom properties at any level (a parent class, a media query, JS). One source of truth, no editing the gradient string.

Can I animate background patterns?

Yes. Animate background-position on a static pattern to scroll it (cheap, GPU-friendly). Animate the custom properties via @property + transition for color shifts. Animate background-size for the 'breathing' effect. Modern CSS @property even lets you animate gradient color stops directly. Common use cases: slow-scrolling marketing-section backgrounds, hover-triggered pattern shifts, loading-state stripes that move.

Why does the pattern look weird at certain sizes?

CSS gradient patterns are most readable at sizes ~12-48px. Below 8px the gradient stops can't resolve into visible features (Chrome / Safari snap to nearest pixel boundaries differently). Above 80px the pattern often becomes too large for the typical UI surface it sits behind. The generator's size slider defaults to 24px which is the sweet spot for most use cases.

Does this work on Safari / iOS?

Yes — all 12 patterns use only universally-supported CSS (linear-gradient, radial-gradient, repeating-linear-gradient, multiple background-image layers, background-size, background-position). Safari 9+, Chrome 27+, Firefox 16+, every iOS / Android browser since ~2016. The only feature with newer support is the themeable CSS-variable output, which works wherever custom properties do (everything since 2016).

Is this free for commercial use?

Free, MIT-licensed, zero attribution required, no watermark, no signup. Use on any project — personal, client, enterprise — without permission.