Hex Grid Generator — Free Hexagon Pattern CSS & SVG

Use this hex grid generator to create a seamless hexagon pattern as copy-paste CSS or SVG code — no downloads, no signup.

Every hexagon tile is built from your exact size, gap, and color settings, so the output is a tessellating pattern with no visible seams when it repeats.

How It Works

The generator builds a single hexagon “tile” sized to tessellate perfectly, then repeats it using standard CSS background-image and background-size — the same technique used for any seamless tiling background, just with hexagons instead of a grid.

Switching pointy-top and flat-top rotates the tessellation math (row spacing and column spacing swap), so the pattern stays seamless in either orientation. The gap setting adds spacing between hexagons before the tile size is calculated, so the tiling stays exact at any gap value.

For a fixed-size graphic instead of a repeating background, the SVG Code tab renders an explicit grid at your chosen rows and columns — useful for a one-off hero image or icon rather than a full-page pattern.

When to Use a Hex Grid

• Section backgrounds and dividers — a subtle hex pattern behind a hero section or footer adds texture without using an image file, so it stays lightweight and fully responsive.
• Skill/feature grids and honeycomb layouts — the alternating two-color fill mode gives a checkerboard-style honeycomb look, useful as a decorative background behind icon or stat grids.

FAQ

What’s the difference between a hex grid and a honeycomb pattern?
A hex grid and a honeycomb pattern describe the same tessellation of hexagons — “honeycomb” typically refers to the alternating two-tone version, which this generator produces with the Alternating fill mode.

Can I use a hex grid as a CSS background without an image file?
Yes — the CSS Background output embeds the hexagon tile as an inline SVG data URI directly inside the CSS, so no separate image file or HTTP request is needed.

Pointy-top or flat-top — which should I use?
Pointy-top hexagons (vertices at top and bottom) read as more vertical and are common in honeycomb-style patterns, while flat-top hexagons (flat edges at top and bottom) feel more grid-aligned — the choice is purely visual, both tessellate identically.

Is the generated code mobile-responsive?
Yes — the CSS background tiles automatically at any container width or height since background-repeat handles the repetition, and the SVG code output uses a viewBox so it scales cleanly if you set a responsive width in your own CSS.