Your files never leave your device. All processing happens locally in your browser.
How do I make a repeating CSS background pattern?
The Background Pattern Generator builds seamless repeating patterns from pure CSS gradients — no image file. Pick a pattern (stripes, diagonal, dots, grid, checkerboard, cross-hatch, zigzag, argyle, triangles, waves, plus or diamonds), choose a foreground and background colour, then dial the tile size, line / dot thickness, angle (for stripe families) and foreground opacity. It renders a live tiled preview and emits a copy-ready <code>.pattern { … }</code> rule using <code>background-image</code>, <code>background-size</code> and <code>background-position</code>. Everything runs 100% in your browser; no image is downloaded and nothing is uploaded.
Patterns are layered linear / radial gradients tiled with background-size — resolution-independent and tiny
Change colours, tile size, thickness, angle and opacity; the preview updates instantly
Copy the whole .pattern rule, or just the background-image value for an existing declaration
Universal browser support (linear/radial gradients since IE10); the tool avoids conic gradients on purpose
What is
CSS gradient background pattern
A repeating background pattern made entirely from CSS gradients rather than a raster image. One or more gradient functions (repeating-linear-gradient, repeating-radial-gradient, or plain linear/radial gradients with hard colour stops) describe a single tile; background-size sets the repeat interval and background-position offsets the layers, so the tile repeats seamlessly across any element. Because it is vector maths, the pattern is resolution-independent, adds no HTTP request, and can be recoloured or resized by editing numbers in the CSS.
Yes. Your colours and slider values are turned into CSS gradient code entirely on your device — no image is fetched, nothing is uploaded, and there is no server or CDN in the processing path.
Everything is 100% client-side. The tool holds your pattern choice, the two colours and the size / thickness / angle / opacity values as typed state, and a pure engine serialises them into layered CSS gradient declarations (background-image, background-size, background-position) right in your browser tab. The live preview is your own browser rendering that exact CSS — no image is downloaded and no input is ever sent to a server. It works offline once cached, and closing the tab discards your work.
For geometric patterns, usually yes: gradients are resolution-independent, add no extra HTTP request or file weight, and recolour or resize by editing numbers. Photographic or hand-drawn textures still need an image or SVG.
CSS gradient patterns win on weight and flexibility for GEOMETRIC repeats: they are pure vector maths, so they stay crisp at any DPI, cost nothing to download (no image request), and you recolour or rescale them by changing a value. The trade-off is paint cost — the browser rasterises the gradient on every repaint, so a complex multi-gradient tile covering a very large scrolling surface can jank on low-end devices; keep tiles simple and avoid animating background-position over big areas. For genuinely organic texture (photographic noise, grain, hand-drawn marks), a compressed image or an SVG is still the right tool; gradients tessellate shapes, they do not synthesise randomness.
A repeating gradient (or a gradient plus background-size) defines one tile; the browser repeats that tile edge-to-edge. Hard colour stops — two stops at the same position — give crisp shapes instead of a smooth blend.
A pattern is one tile repeated. repeating-linear-gradient and repeating-radial-gradient tile themselves along their axis: the final colour stop sets the repeat length, so a stripe is “colour 0 to Npx, transparent Npx to tile-size”. Other patterns use ordinary linear/radial gradients as a single tile and set background-size to the tile dimensions, then background-position to offset stacked layers into a checkerboard, zigzag or diamond. The trick for sharp edges is the HARD COLOUR STOP: placing two colour stops at the same position makes the colour switch instantly rather than fading, which is how gradients draw solid geometric shapes. This tool spells the maths out in the copyable CSS so you can tweak it by hand.
Yes. Every pattern uses only linear and radial gradients, which have unprefixed support since IE10 (2012). The tool deliberately avoids conic gradients, so there is no compatibility gap for current browsers.
All twelve patterns are built from linear-gradient, repeating-linear-gradient, radial-gradient and repeating-radial-gradient, plus background-size and background-position — features with universal, unprefixed support across Chrome, Firefox, Safari and Edge since 2012 (IE10). The generator intentionally does not use conic-gradient (which only reached all major browsers around 2018–2021), so the output has no modern-only gap and needs no fallback for current users. The generated CSS is standard and copy-paste ready; the only visual caveats are rendering differences on sub-pixel edges across displays and the paint-cost note for very large surfaces.
Detailed Explanation
⚙️Methodology
How the Background Pattern Generator Works
A pure engine (bgPatternEngine.ts) models a pattern as typed state — a pattern type, a foreground and background colour, a tile size, a line / dot thickness, an angle and a foreground opacity — and serialises it into layered CSS gradient declarations: a background-color base plus a background-image of one or more linear/radial gradients, with background-size setting the repeat interval and background-position offsetting stacked layers. The same output drives both the copyable .pattern rule and the React inline style, so the live tiled preview is the exact CSS you copy. Every pattern is real, standards-based CSS built only from gradients; no raster image is ever generated or fetched.
Each is layered linear-/radial-gradient CSS tiled with background-size — never an image
The preview renders the exact serialised CSS, so what you see is what you copy
Pure, deterministic engine — the same spec always emits the same CSS string
Controls adapt per pattern (thickness / angle are hidden where they do not apply)
🔧Technical Details
The Tiling Technique: Hard Colour Stops and background-size
A repeating pattern is one tile repeated edge-to-edge. repeating-linear-gradient and repeating-radial-gradient tile themselves along their axis — the final colour stop sets the repeat length, so a stripe is “foreground 0→N px, transparent N px→tile size”. Other patterns use plain gradients as a single tile and set background-size to the tile dimensions, then background-position to offset stacked layers into a checkerboard, zigzag, argyle or diamond tessellation. Crisp geometric edges come from the HARD COLOUR STOP: two colour stops at the same position make the colour switch instantly rather than blending, which is how gradients draw solid shapes.
repeating-linear / repeating-radial gradients tile along their own axis
The last colour stop defines the repeat interval for repeating gradients
background-size sets the tile; background-position offsets layers into a lattice
Hard colour stops (two stops at one position) give sharp shapes, not blends
Foreground opacity is applied as an rgba() alpha so the base shows through
📋Use Cases
When to Use a CSS Pattern (and How)
Gradient patterns shine as subtle section backdrops, hero and card textures, empty-state fills, and print-style motifs — anywhere you want visual interest without a downloaded asset. Because they are vector maths, they stay crisp on any display and recolour or rescale by editing numbers. Paste the .pattern rule onto any element (a div, section or body) and it tiles to fill at any size; there is no fixed width or height. For readability behind text, keep the foreground/background contrast low so the pattern reads as texture rather than clutter — the tool shows a live WCAG contrast figure to guide this.
Great for section backdrops, hero/card textures, empty states and print motifs
Recolour or resize by editing values — no re-exporting an image
Tiles to fill any element at any size; no fixed dimensions needed
Keep contrast low behind text so the pattern is texture, not noise
Copy just the background-image value to slot into an existing declaration
⚠️Limitations
Honest Limitations: Paint Cost and Organic Texture
CSS gradient patterns are resolution-independent and weightless, but the browser RASTERISES the gradient on every repaint, so covering a very large, scrolling surface with a complex multi-gradient tile can cost paint time and jank on low-end devices. Keep tiles simple, use the fewest colour stops needed, and do not animate background-position across big areas — animate opacity or transform, which the GPU can offload. Gradient tiling also tessellates SHAPES; it cannot synthesise randomness, so genuinely organic textures (photographic noise, grain, hand-drawn marks) still need an image or SVG. Finally, sub-pixel edge rendering can differ slightly across displays, so verify on real screens.
Gradients are painted on every repaint; big complex tiles can jank on weak devices
Prefer fewer colour stops; do not animate background-position over large surfaces
Animate opacity/transform for motion (GPU-offloaded) instead of the gradient
Not a substitute for organic texture — noise/grain still needs an image or SVG
Sub-pixel edges vary across displays; test on real screens
🔒Privacy & Security
Private by Design
Everything happens on the user’s device. The pattern spec, the two colours and the slider values are just numbers and strings serialised into CSS locally in the browser tab; nothing is uploaded, logged or stored on a server, and — unlike an image-based generator — no asset is downloaded, so there is no CDN in the processing path. The output is plain CSS copied to the clipboard, the tool works offline once cached, and closing the tab discards all state. There is no tracking, no account and no telemetry.
Colours and values are serialised into CSS entirely in the browser
No image is fetched and nothing is uploaded — no CDN in the processing path
Output is plain CSS copied locally; works offline once cached
No tracking, no accounts, no server-side storage
Closing the tab discards all state
Ways to add a repeating background, and where this tool fits
Approach
How it renders
Trade-off
CSS gradient pattern (this tool)
Layered linear/radial gradients tiled with background-size
No image request, resolution-independent, editable; paint cost on huge surfaces
Tiled raster image (PNG/JPG)
A downloaded image repeated via background-repeat
Handles organic texture, but adds an HTTP request, weight and DPI limits
SVG pattern
An inline or referenced <pattern> element
Vector and flexible for complex art; heavier markup than a gradient
Conic-gradient pattern
Uses conic-gradient for pie/rays
Powerful, but support only since ~2018–2021 — this tool avoids it for universality
This tool builds gradient patterns only (linear/radial, no conic), so its output has universal unprefixed support (IE10+, 2012). For photographic or hand-drawn texture, use an image or SVG. As of July 2026.
