Pattern Generator

Build clean CSS background patterns with a live preview. Copy CSS, export SVG, and share by button.

How to Use

  1. Pick a pattern type (stripes, dots, grid, checker, etc.).
  2. Set colors, size, spacing, angle, and opacity.
  3. Copy the CSS output (or export SVG) when it looks right.
  4. Use “Share Link” to generate a URL that restores your settings.
Live Preview
Preview is rendered from CSS output. No uploads.
Type
—
Tile
—
Contrast
—
Tip: Turn on “Transparent background” if you want only the pattern layer.
Inputs & Settings
Fast controls tuned for real CSS usage (background-image + size).
Choose a pattern primitive. Output stays copy-ready CSS.
Typical: 8–64px for UI backgrounds.
Used for stripes/diagonal patterns.
Line width (stripes/grid). For dots, this becomes dot size.
Space between lines/dots. Set 0 for dense patterns.
Applies to the pattern layer color(s).
Used for stripes/dots/grid lines.
Used for checkerboards / multi-tone patterns.
Applied as background-color (optional).
Used for background-size.
Used for background-size.
CSS
—
Background-size
—
Colors
—
Export
—
Use the right rail buttons to copy CSS or export SVG.
Details (CSS output)
Output is designed to paste directly into a CSS class (uses background-image, background-size, and optional background-color).

Reference

These are the core CSS primitives this tool composes (kept short and practical).

  • repeating-linear-gradient() for stripes/diagonals
  • radial-gradient() for dots
  • Layered gradients for grids and checkerboards
  • background-size controls tiling

FAQ

Does this upload anything?

No. The preview and exports are generated in your browser.

What’s the best pattern for readability?

Use low opacity (0.05–0.20) and larger tile sizes (24–64px) so text stays clear.

Why does my pattern look “muddy”?

High opacity + small scale can cause visual noise. Increase scale/tile or reduce opacity.

Can I export SVG?

Yes (client-side). SVG is great for crisp scaling and predictable tiling.

Tool Info

Last updated:

Updates may include new pattern types, better exports, and edge-case handling.