Free · Fast · Privacy-first

CSS Pattern Background Generator

Pure CSS repeating patterns avoid the HTTP request of a raster image, scale perfectly at any resolution from a 320 pixel phone to a 5K monitor, and recolour with a single CSS variable change.

⚡

Generates dots, stripes, checkerboards, and conic patterns in pure CSS

🔒

Controls for pattern colour, size, and spacing

✨

Uses background-repeat and background-size for infinite tiling

⚡

No external images: all patterns are CSS gradient-based

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

FreeNo signupWhite-label

Add this Background Gen to your website

Drop the Background Gen into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.

Files stay 100% in the visitor's browser
Responsive — adapts to any container width
Free forever, no API key needed

Embed code

<iframe
  src="https://www.fixtools.io/css-tool/background-gen?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Background Gen by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

<iframe
  src="https://www.fixtools.io/css-tool/background-gen?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Background Gen by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.

Pure CSS Patterns with Gradients, Repeat, and Background-Size

CSS repeating patterns rely on the combination of background-image carrying a small gradient tile, background-size carrying the tile dimensions, and background-repeat: repeat tiling the result across the entire element. A dot grid uses radial-gradient to draw a circle at the centre of each tile, written as background-image: radial-gradient(circle, #94a3b8 1px, transparent 1px). Setting background-size: 24px 24px tiles this 24-pixel cell with a 1-pixel dot at 24-pixel intervals across the element. Changing the 1px stop position to 2px enlarges every dot; changing 24px to 12px doubles the dot density without touching the dot itself. Stripe patterns use linear-gradient with a 45-degree direction switching between two colours at fixed positions, tiled with a background-size value that exactly matches the stripe pitch so the seam disappears at every tile boundary.

Checkerboard patterns require two or four gradient layers depending on the approach because a single-layer gradient cannot produce a true two-colour checkerboard. Two 45-degree linear gradients at opposite angles, combined with the right background-size and background-position offsets, create a repeating square grid. The canonical CSS reads background-color: #e2e8f0; background-image: linear-gradient(45deg, #94a3b8 25%, transparent 25%), linear-gradient(-45deg, #94a3b8 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #94a3b8 75%), linear-gradient(-45deg, transparent 75%, #94a3b8 75%). Setting background-size: 20px 20px and background-position: 0 0, 0 10px, 10px -10px, -10px 0px produces a clean tiling checkerboard with no seams, even though the math feels surprising on first reading.

Conic gradients open additional pattern possibilities that linear and radial gradients cannot reach alone. The conic-gradient() function sweeps colour around a centre point at a specified starting angle, and repeating-conic-gradient() tiles that sweep around the full 360-degree rotation. A simple pie-slice stripe uses repeating-conic-gradient(#334155 0deg 30deg, transparent 30deg 60deg) and repeats every 60 degrees, producing six alternating stripes radiating from the element centre. Combining conic gradients with background-size and background-position creates radial tile patterns that emulate sunbursts, pinwheels, and geometric mandala motifs. Browser support for conic-gradient is good across Chrome 69, Firefox 83, and Safari 12.1, which covers every browser version still in active use today.

Composing complex patterns from multiple gradient layers is where CSS patterns become genuinely competitive with raster sprites. You can stack a dot grid over a stripe pattern, layer two stripe gradients at 90 degrees to each other for a perfect grid, or combine a radial-gradient highlight with a repeating tile for a subtle spotlight effect. Each layer in the comma-separated background-image value tiles independently with its own background-size and background-position, so a fine 8-pixel dot grid can sit on top of a 40-pixel diagonal stripe band, and both update independently when the design tokens change. The whole composition compiles into a single declaration with no image assets, no build step, and no runtime cost beyond the initial gradient rasterisation that the GPU caches and reuses.

MDN: repeating-linear-gradient()CSS Tricks: CSS Patterns Gallery

How to use this tool

💡

Select a pattern type (dots, stripes, checkerboard, or conic), choose a foreground and background colour, and set the pattern scale using the size input. The preview tiles the pattern across the element. Copy the CSS background declaration when the pattern matches your design.

How It Works

Step-by-step guide to css pattern background generator:

1
Select a pattern type
Choose from dots, stripes, checkerboard, grid, or conic from the pattern selector at the top of the tool. The preview immediately shows the selected pattern tiled across the element using sensible default colours and scale values, so you have a working starting point without entering any parameters. Switching pattern types resets the relevant parameters to their defaults for the new pattern so you do not have to clear stale values from the previous selection.
2
Set pattern colours
Choose the foreground pattern colour and the background colour using the two colour pickers. These map to the filled and transparent areas of the underlying gradient tile, so adjusting them recolours the entire pattern in real time. The pattern colour value supports hex, RGB, HSL, and rgba including partial transparency, which is useful when the pattern needs to layer over existing content at reduced visibility rather than as a solid foreground.
3
Adjust scale and spacing
Enter a background-size value to control tile dimensions in pixels. Smaller values increase pattern density and pack more decorative elements into the visible area, while larger values space the geometric shapes further apart for a calmer, less busy look. For dots and grids, the size value controls both the spacing and the perceived pattern scale, while for stripes the size value controls the stripe pitch. Use values that divide evenly into the element width to avoid partial tiles at the edges.
4
Copy the CSS background block
Click Copy CSS to get the complete set of background declarations including background-color, background-image with all gradient layers, background-size, background-position, and background-repeat where necessary. Paste the block into your stylesheet, into a component CSS module, or into a CSS custom property declaration so the pattern becomes a reusable token that any element can apply with a single background: var(--pattern-dots) reference.

Real-world examples

Common situations where this approach makes a real difference:

Designer adding a subtle dot grid to a landing page section

A designer wants a light dot grid on a white section background to add visual texture without the weight of a hero image and without distracting from the headline. They select the dot pattern, set the dot colour to #cbd5e1 and the background to #ffffff, and use a 20-pixel tile size that produces a comfortable density at desktop viewport widths. The result is a subtle repeating grid that adds depth without competing with the content, and because the entire pattern is CSS-generated, the section weighs zero additional bytes beyond the declaration itself, which keeps the page fast on cellular connections.

Developer creating a striped loading state

A developer needs an animated loading bar with diagonal stripes that matches the visual language of the rest of the design system rather than the browser-default progress bar appearance. They use the stripe pattern generator to get the repeating-linear-gradient CSS, then add a background-size of 30 by 30 pixels and animate background-position from 0 0 to 30px 30px in a 1-second linear infinite keyframe. The result is a moving diagonal stripe pattern that visually communicates ongoing work, ships in two short blocks of CSS, and runs entirely on the GPU compositor.

Frontend engineer building a checkerboard transparency preview

An image editor tool needs a checkerboard background behind transparent PNG previews, matching the standard transparency indicator pattern used in Photoshop, Sketch, and Figma so users immediately understand the see-through regions of their assets. The engineer uses the checkerboard pattern CSS with 10-pixel tiles in two tones of grey at #e5e7eb and #ffffff, sets it on the preview container, and the pattern requires no image files, scales cleanly at any preview size, and recolours instantly for the application dark mode by toggling two custom properties.

Student creating a retro grid layout for a portfolio

A student wants a grid line pattern on their portfolio hero section, inspired by the synthwave aesthetic with thin neon lines on a dark background. They use the stripe pattern at 0 degrees layered with a 90-degree stripe to create a crosshatch grid, then set both layers to a low opacity using rgba for the foreground colour so the grid sits behind the headline rather than competing with it. The full effect uses only two gradient layers in a comma-separated background-image value and demonstrates how primitives compose into a polished hero in a single CSS rule.

Pro tips

Get better results with these expert suggestions:

Use transparent in gradient patterns for recolourability

Define pattern shapes in a single foreground colour and use the transparent keyword for the negative space within the tile, rather than baking in a second solid colour for the background area. Setting background-color on the element controls the pattern background separately from the gradient itself, so changing one custom property such as --pattern-bg recolours the entire pattern without touching the gradient definition. This pattern is essential when the same pattern needs to appear on dark mode and light mode surfaces with consistent foreground geometry.

Combine multiple gradient layers for complex patterns

CSS allows comma-separated background-image layers where each tile independently and can carry its own background-size and background-position. Overlapping two differently-sized dot grids at different opacities creates a moire-style interference pattern that would be expensive to author as a raster. Two stripe layers oriented at 90 degrees to each other produce a perfect crosshatch grid. Layering gradients multiplies the visual complexity achievable from extremely simple primitives, all without adding a single byte to the network payload.

Use background-clip: text for patterned text fills

Apply a repeating gradient pattern to text by setting background: repeating-linear-gradient(...) alongside background-clip: text and color: transparent. The browser then renders the pattern only inside the glyph shapes, producing dotted, striped, or checkerboard text fills that scale crisply at any font size. Set a fallback color value for browsers that do not yet support background-clip: text on the unprefixed property, and add -webkit-background-clip: text for the WebKit prefix that some older Safari builds still require on text fill effects.

Adjust background-position to align pattern to element edges

By default, tiled patterns start their first tile from the top-left corner of the element, which can produce a half-cropped dot or stripe at the bottom and right edges depending on the relationship between element size and tile size. Use background-position: center to centre the tile grid, which ensures symmetric patterns end up visually symmetric on symmetric elements. For checkerboards and grids, specific pixel offsets are usually required to align tile boundaries with element edges so the pattern appears intentional rather than accidentally clipped.

Use background-color as the pattern base

Set background-color to the pattern background tone separately from background-image. If the gradient pattern fails to render, the solid background-color shows instead. This provides a clean fallback without a blank white element.

Scale patterns with CSS custom properties

Define --pattern-size as a CSS variable and use it in both background-size and gradient stop positions. Changing --pattern-size at a breakpoint scales the entire pattern without rewriting the gradient values individually.

Check pattern performance on scroll

Tiled gradient backgrounds on large elements or fixed-attachment patterns can cause repaint on scroll. Test the scroll performance in browser devtools paint profiler. If repaints are expensive, convert the pattern to a small PNG or SVG sprite instead.

FAQ

Frequently asked questions

Use radial-gradient with a small circle, then tile the result with background-size. The canonical declaration is background-image: radial-gradient(circle, #94a3b8 1px, transparent 1px); background-size: 20px 20px. The 1px stop value controls the dot radius, and the 20px background-size controls the spacing between dots in both axes. Increase the dot radius or decrease the background-size to make the pattern denser, decrease the radius for a finer dot, and use a transparent dot colour with background-color on the element to control the field tone independently from the dot foreground.

Use repeating-linear-gradient at 45 degrees with alternating colour and transparent stops. The canonical pattern reads background-image: repeating-linear-gradient(45deg, #94a3b8 0px, #94a3b8 5px, transparent 5px, transparent 20px). The 0px to 5px range defines the stripe width, and the 5px to 20px range defines the gap between stripes. Adjust these four values to change stripe width and spacing independently, swap to -45deg or 90deg to reorient the direction, and skip the background-size declaration entirely because repeating-linear-gradient handles tiling natively without needing a separate tile dimension.

conic-gradient() is supported in Chrome 69 released in 2018, Firefox 83 released in 2020, and Safari 12.1 released in 2019. Microsoft Edge supports it from version 79 onward, which coincides with the switch to the Chromium engine. This covers every browser in current active use, including evergreen desktop browsers and the WebKit-based browsers shipped on iOS. The -webkit-conic-gradient() prefix was needed only for the earliest experimental Safari implementations and is no longer required for any browser version still receiving security updates. Check caniuse.com for the up-to-date support table if you must target genuinely ancient browsers.

Use background-size to set the tile dimensions, and ensure the gradient stop positions inside the tile remain proportional to the new tile size. For patterns defined with gradient stop positions in pixels, the background-size and stop positions must scale together so the pattern geometry stays consistent. A dot at 1px radius in a 20px tile scales to a 2px dot in a 40px tile by doubling both the stop position and the background-size value. Percentage-based positions in gradients are less common for patterns because percentages resolve relative to the gradient line length rather than the tile dimensions, which can produce unexpected scaling.

A clean two-colour checkerboard requires four gradient layers or two carefully crafted 45-degree gradients with position offsets to align tile boundaries correctly. The classic approach uses four linear gradients with two at 45 degrees and two at -45 degrees, each covering 25 percent of the tile area at a different position. Set background-size: 20px 20px and background-position: 0 0, 0 10px, 10px -10px, -10px 0px so the four layers combine to fill alternating squares with no visible seam. Changing the background-size value scales the check size proportionally while keeping the alternating pattern intact.

Yes. Animating background-position on a tiling pattern creates a scrolling or moving effect that loops seamlessly when the animation end position equals the background-size value. Set background-position from 0 0 to the background-size value in a looping keyframe animation with animation-timing-function: linear and animation-iteration-count: infinite for continuous motion without stuttering at the loop point. For diagonal stripes, animating from 0 0 to 30px 30px when the background-size is 30 by 30 pixels creates a seamless moving stripe effect. Keep background-size small and animation-duration at least 1 second to avoid excessive repaints on low-end devices.

Apply the background declaration to the specific section element selector. The pattern paints only over that element and its padding area, leaving the rest of the page unaffected. If the section has overflow: hidden set, child elements will receive the pattern background behind their own content unless they declare an opaque background of their own. If you want the pattern behind only a portion of a section, use a ::before or ::after pseudo-element with position: absolute covering the target area, apply the pattern to the pseudo-element, and set position: relative on the parent so the pseudo-element is contained.

Seams appear when the gradient stop positions do not align precisely with the background-size value, so each tile begins or ends with a fractional pixel that the browser cannot render exactly. For pixel-based patterns, ensure every stop position adds up to the exact background-size value with no leftover and no rounding. Fractional pixel values can cause sub-pixel rendering differences that appear as thin lines between tiles on certain displays and browsers, especially at non-integer device pixel ratios. Use whole pixel values in both gradient stops and background-size, or shift to a slightly larger tile that overlaps the seam.

CSS gradient patterns add zero bytes to image requests, scale infinitely without pixellation, recolour through CSS variables in milliseconds, and never need cache invalidation when the design changes. They are ideal for geometric patterns made from dots, stripes, grids, and conic sweeps. Small PNG or SVG patterns, when compressed well, can produce organic textures such as paper grain, noise, and hand-drawn elements that gradient functions cannot replicate. A 200-byte PNG tile loaded once and cached performs negligibly different from a CSS gradient at runtime. Pick CSS for geometric patterns and a sprite for organic textures.

Define the tile size and gradient stops in CSS custom properties so the entire pattern scales with a single variable change inside a media query. Declare --pattern-size: 24px on :root and use it inside background-size: var(--pattern-size) var(--pattern-size) and inside the gradient stop positions. At a mobile breakpoint, override --pattern-size to 16px and the dots tighten without rewriting any gradient declarations. The same approach works for stripe pitch, checkerboard tile size, and conic sweep angles, which lets one pattern adapt across breakpoints without duplicating the full background-image declaration per media query.