Skip to main content
iotools.cloudiotools.cloud

CSS Background Pattern Generator

Generate a seamless repeating background pattern in pure CSS — dots, grids, stripes, checkerboards, waves and 3D cubes — with your own colors, scale and opacity. Copy the ready-made CSS rule and HTML snippet, no image file needed.

Input

Colors

Drop this to 10-20% for a subtle texture behind text.

Geometry

Size of one repeating tile, in pixels.

Thickness of the lines, or the radius of the dots.

Output

The generated rule is scoped to this class, so it won't collide with your own styles.

Output

Your pattern will appear here.

The real generated CSS, rendered in an isolated Shadow DOM — exactly what you copy.

CSS
HTML snippet

The inline min-height is only there to give the empty demo box a size — drop it in your own layout.

Was this helpful?

Guides

A repeating background pattern made of CSS gradients weighs nothing. There is no image file to host, no extra HTTP request, no blurry edges when someone opens your page on a retina screen, and the colors change by editing two hex values instead of re-exporting a PNG. This generator builds that CSS for you: pick a pattern, set the colors, scale and opacity, and copy the finished rule.

Everything runs in your browser — nothing you type is uploaded anywhere.

How to use it

  1. Pick a pattern. Fifteen families are available: polka dots, offset dots, grid, graph paper, horizontal / vertical / diagonal stripes, cross-hatch, isometric lines, checkerboard, diamonds, triangles, zigzag, waves, and 3D cubes.
  2. Set the colors. "Pattern color" paints the shapes, "Background color" fills behind them.
  3. Adjust the geometry. Pattern size is the width of one repeating tile in pixels; Line weight is how thick the lines are (or how big the dots are). Line weight is hidden for the patterns whose geometry is purely proportional — a checkerboard has no line to thicken.
  4. Drop the opacity. This is the setting most people want and most generators don't have. At 100% a pattern competes with your content; at 10–20% it reads as texture.
  5. Copy the CSS and paste it into your stylesheet. The HTML snippet next to it shows the markup the rule expects.

Settings

  • Pattern — the geometry family. Every one is a pure background-image built from linear-gradient, repeating-linear-gradient or radial-gradient.
  • Pattern color / Background color — hex values. background-color sits under the gradient layers, so the pattern color is what you see on top.
  • Pattern opacity — below 100% the pattern color is emitted as rgba() so the background shows through it.
  • Pattern size — 4px to 160px. Small values give fine texture, large values give bold graphic blocks.
  • Line weight — capped at half the tile size, because a line thicker than that floods the tile into a solid block.
  • Class name — the rule is scoped to this class, so it can't collide with anything else in your stylesheet.

Why does the CSS have several background-image layers?

Most of these patterns can't be drawn with one gradient. A grid is a vertical line family plus a horizontal one; a checkerboard is two offset diagonal gradients; the isometric cubes need six layers to give each face a different shade. CSS paints them in the order written, first layer on top, and background-size / background-position line up with those layers one for one. It looks verbose, but it is one property — you can safely paste the whole block as-is.

Why is background-size missing on the stripe patterns?

The stripes, cross-hatch and isometric families use repeating-linear-gradient, which carries its own repeat period in the gradient stops. Adding a background-size there would change nothing, so the tool doesn't emit it.

Will these patterns work in older browsers?

Every pattern uses CSS gradients, supported everywhere since roughly 2012. The stripe families use multi-position color stops (color 0 6px), which need a browser from 2019 or later — every current version of Chrome, Firefox, Safari and Edge handles them.

What if I want a pattern behind text?

Set the opacity to 10–20% and pick a small pattern size. A busy pattern at full strength makes body copy hard to read; the same pattern at 15% reads as paper texture and stays out of the way.

Related tools

Need a gradient rather than a pattern? The CSS Gradient Generator builds linear and radial gradients visually. For a repeating shape emitted as a real SVG file instead of CSS, use the SVG Pattern Generator, and for a soft blurred backdrop, the CSS Aurora Blob Generator.

cssbackgroundpatterncss patternbackground patternrepeating backgroundseamlessdotsstripesgridweb design

Love the tools? Lose the ads.

One payment clears every ad from your account, for good. No subscription, no tracking.

Remove ads