Skip to main content
Toollyz

Search tools

Search for a command to run...

Pattern Background Generator

Generate seamless, infinitely tileable backgrounds using only CSS `repeating-linear-gradient` and `radial-gradient`. Eight pattern types, two-colour theme, adjustable tile size, thickness and angle. No images, no SVG — just one CSS rule. 100% offline.

What is the Pattern Background Generator?

Pattern Background Generator builds repeating backgrounds using nothing but CSS `repeating-linear-gradient()`, `linear-gradient()` and `radial-gradient()` — no images, no SVG, no JS. Eight patterns cover the recipes designers actually use: diagonal stripes (configurable angle), horizontal stripes, vertical stripes, classic checks (the 'transparent background' chessboard), pixel grid (great for technical drawings), dots, polka dots (offset two-grid), and diagonal cross-hatch. Each pattern accepts a foreground + background colour pair, a tile size (4-96 px) and a thickness (% of tile size that's foreground). Diagonal stripes additionally take an angle. The output is one to four CSS lines that you paste straight into a stylesheet, fully responsive (the gradients tile to any element size), and instantly themeable — swap the two colours and the pattern follows.

How to use it

  1. Pick a preset to load a sensible recipe, or use the dropdown to pick a pattern type directly.
  2. Set Foreground (the pattern dots/lines) and Background (the space between).
  3. Tune Tile size — smaller for fine grain, larger for bold stamps.
  4. Adjust Thickness — for stripes this is the bar width %, for dots the dot diameter %.
  5. For diagonal stripes, drag the Angle slider (0° = horizontal, 90° = vertical, 45° = classic barber pole).
  6. Click Copy CSS — paste the rule into any element's stylesheet.

Benefits

  • Eight pattern types — stripes (diagonal/horizontal/vertical), checks, grid, dots, polka, cross-hatch.
  • Pure CSS — no SVG, no PNG, zero HTTP requests for assets.
  • Two-colour theme — change the two pickers, the whole pattern follows.
  • Configurable tile size (4-96 px) and thickness percentage.
  • Diagonal stripes have a 0-180° angle slider for barber-pole, hazard or noise effects.
  • Output is one CSS rule — paste straight into any stylesheet or `style=` attribute.
  • Tiles infinitely without seams in any browser that supports CSS gradients (everyone since 2013).
  • Configuration persists in localStorage.
  • Runs 100% in your browser — no server, no upload.

Frequently asked questions

Why not just use an SVG or PNG pattern?

Pure CSS patterns are infinitely scalable (no pixelation), have zero asset weight (no extra HTTP request), are themeable in one place (change two CSS variables), and render at any resolution. The only downside is they're limited to gradient-expressible shapes — for organic textures you'd use the Noise Texture Generator.

How does the checks pattern work?

It stacks four linear gradients at 45° and -45° with different offsets — the diagonals create square checks. Because the gradients are perfectly aligned, the pattern tiles seamlessly at any tile size.

Can I have more than two colours?

Not from the UI — each preset uses a two-colour palette. You can extend the output CSS by hand to add a third colour or more gradient stops; it's just CSS.

Does this work on Internet Explorer?

`repeating-linear-gradient` works in every browser released since 2013. IE11 had it. Modern Chrome / Firefox / Safari handle every pattern here. We test against current evergreen releases.

Why does the diagonal stripe angle slider go to 180° not 360°?

Stripes at 45° and 225° look identical (just a colour swap). 180° covers all unique orientations.

Why are my checks slightly off when I change tile size?

Checks need `background-size: <size>px <size>px` and a specific offset pattern (`0 0, 0 half, half -half, -half 0`). Our output sets all four — if you only paste the `background-image` and not the position/size lines, you'll see misalignment.

Can I export the pattern as an image?

Not from this tool — the output is CSS. Use the browser DevTools to screenshot a rendered element, or rebuild the same pattern in an SVG editor.

Does the pattern animate?

Static by default. To animate, wrap it in a `@keyframes` rule that transitions `background-position` from 0 0 to (tile-size) (tile-size) — that's the classic 'marching ants' loop.

Why is the thickness in % rather than px?

% scales with the tile size — if you change tile size from 32 to 64 px, the pattern stays visually consistent because the foreground keeps the same proportion. Pixel thickness would force you to recalculate every time.

Are my settings saved between visits?

Yes — pattern, colours, size, thickness and angle all persist in localStorage under `toollyz:pattern-bg`.

Is anything uploaded?

No. Pattern building runs entirely in your browser.

Related tools

See all image tools