Generate repeating geometric patterns from basic shapes with customizable size, colors, and spacing.
Geometric Pattern Generator turns basic shapes into a regular, repeating field for backgrounds and decorative surfaces. Shape size controls the visual weight of each motif, spacing controls the open area between motifs, and the selected colors establish the figure-to-background relationship. The result is intended to be judged as a tiled design rather than as a single isolated shape. A frequent mistake is evaluating only the center of the preview: repetition can create noticeable rows, columns, or empty channels that become clearer when the pattern covers a larger area.
The pattern is organized around a repeat interval containing a basic geometric motif and the space assigned around it. Increasing shape size gives each repeated element more visual area. Increasing spacing separates neighboring elements and lowers the apparent density. These settings interact: the same gap can feel narrow beside a large motif and unusually wide beside a small one.
Color choices determine how clearly the repeated geometry separates from its surrounding field. Strong lightness contrast makes the motif immediately legible, while similar colors can produce a quieter texture in which the repetition is less obvious. Judge color together with density because tightly spaced, high-contrast elements can dominate a surface even when each individual shape is small.
No. Size and spacing answer different design questions. Shape size changes how much area each motif occupies, while spacing changes the separation and cadence of the repeat. Adjusting either can alter perceived density, so two patterns may feel similarly crowded even when their shape sizes and gaps are not numerically alike.
It is intended to form a repeating background, but visual continuity should still be checked at the scale where it will be used. A boundary may be geometrically continuous yet remain noticeable because aligned shapes create a strong row, column, or gap. Also confirm that the available result format and dimensions suit the destination before relying on it.
The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.